x Axis dupblicate based on width increase (SfCartesianChart) #1932

[Nick141620]

Dear Team,

My Container Width = width: MediaQuery.of(context).size.width - 20,

Please check 21 is duplicate

My Container Width = width: MediaQuery.of(context).size.width - 100,

But UI is not proper

please help this issue to fix how to stick width of my container and graph display proper in based on device width

`Widget viewGraph(
BuildContext context,
List market,
List nasMarket,
List spMarket,
Color color,
Color nasColor,
Color spColor,
bool isIndividual,
String duration,
{bool isSingle = false,
bool isFromDetail = false,
bool isCrypto = false,
bool isHideYAxis = true}) {
var minimumValue = findMinimumTotalAmount(isIndividual
? market.isNotEmptyOrNull
? market
: spMarket.isNotEmptyOrNull
? spMarket
: nasMarket
: nasMarket);

var maximumValue = findMaximumTotalAmount(isIndividual
? market.isNotEmptyOrNull
? market
: spMarket.isNotEmptyOrNull
? spMarket
: nasMarket
: nasMarket);

if (!isCrypto && duration == "1D") {
if (market.isNotEmptyOrNull) {
market.addAll(generateDataWithInterval(market));
}
if (nasMarket.isNotEmptyOrNull) {
nasMarket.addAll(generateDataWithInterval(nasMarket));
}
if (spMarket.isNotEmptyOrNull) {
spMarket.addAll(generateDataWithInterval(spMarket));
}
}
if (isIndividual == false) {
if (market.length < 1 && nasMarket.length < 1 && spMarket.length < 1) {
isFromDetail = true;
isHideYAxis = false;
} else {
isHideYAxis = true;
}
} else {
if (market.length < 1 && nasMarket.length < 1 && spMarket.length < 1) {
isFromDetail = true;
isHideYAxis = false;
} else {
isHideYAxis = true;
}
}

return Container(
height: Dim.dim_250.h,
width: MediaQuery.of(context).size.width - Dim.dim_80.w,
//width: MediaQuery.of(context).size.width - Dim.dim_20.w,
child: SfCartesianChart(
crosshairBehavior: CrosshairBehavior(
enable: true,
activationMode: ActivationMode.singleTap,
lineDashArray: [2, 2],
),
tooltipBehavior: TooltipBehavior(
enable: false,
),
trackballBehavior: TrackballBehavior(
enable: false,
tooltipDisplayMode: isIndividual
? TrackballDisplayMode.floatAllPoints
: TrackballDisplayMode.groupAllPoints,
lineDashArray: [2, 2],
),
zoomPanBehavior: ZoomPanBehavior(
enablePanning: true,
),
primaryXAxis: CategoryAxis(

    //  autoScrollingDeltaType: DateTimeIntervalType.hours,
    // maximumLabels: 100,
    //  labelStyle: !isIndividual?TextStyle(color: Colors.transparent):null,

    isVisible: isFromDetail ? false : true,
    autoScrollingMode: AutoScrollingMode.start,
    //  labelIntersectAction: AxisLabelIntersectAction.trim,
    // autoScrollingDelta: 120,
    isInversed: isSingle,
    majorTickLines: MajorTickLines(width: 0),
    axisLine: AxisLine(color: kDividerColor, dashArray: <double>[2, 2]),
    // interval: 8,
    // interval: duration=="5D" || duration=="1D"?5:null,

    // interval: duration == "1D" ? duration == "5D" ? duration == "1M" : 1: 8: 24,
    // (foo==1)? something1():(foo==2)? something2(): something3();
    interval: (duration == "1D")
        ? 12
        : (duration == "5D")
            ? 8
            : (duration == "1M")
                ? 5
                : (duration == "6M" || duration == "1Y")
                    ? 30
                    : null,
    majorGridLines: MajorGridLines(
      width: 1,
      dashArray: <double>[2, 2],
      color: Colors.transparent,
    ),
    axisLabelFormatter: (AxisLabelRenderDetails args) {
      late String text;
      late TextStyle textStyle = TextStyle();
      text = duration == "5D" || duration == "1D"
          ? args.text.length > 13
              ? xStyle(duration, args.text)
              : ""
          : args.text.length > 8
              ? xStyle(duration, args.text)
              : "";
      return ChartAxisLabel(text, textStyle);
    }),
plotAreaBorderWidth: 0,
primaryYAxis: NumericAxis(
    numberFormat: NumberFormat.decimalPattern(),
    minimum: (isSingle || isIndividual)
        ? minimumValue == null
            ? null
            : (minimumValue ?? 0).toDouble()
        : null,
    maximum: (isSingle || isIndividual)
        ? maximumValue == null
            ? null
            : (maximumValue ?? 0).toDouble()
        : null,
    isVisible: isHideYAxis,
    opposedPosition: isSingle,
    labelFormat: isIndividual ? '\${value}' : '{value}%',
    //  labelStyle: !isIndividual?TextStyle(color: Colors.transparent):null,
    //  desiredIntervals: 3,
    //   interval: duration=="5D" || duration=="1D"?5:null,
    decimalPlaces: isIndividual ? 1 : 1,
    axisLine:
        AxisLine(color: Colors.transparent, dashArray: <double>[5, 5]),
    majorTickLines: MajorTickLines(width: 0),
    majorGridLines: MajorGridLines(
      width: 1,
      dashArray: <double>[2, 2],
      color: kDividerColor,
    )),
series: isIndividual
    ? individual(
        market.isNotEmpty
            ? market
            : spMarket.isNotEmpty
                ? spMarket
                : nasMarket,
        market.isNotEmpty
            ? color
            : spMarket.isNotEmpty
                ? spColor
                : nasColor,
        isFromDetail)
    : performance(
        market, nasMarket, spMarket, color, nasColor, spColor)),

);
}
List performance(
List dowMarket,
List spyMarket,
List nasMarket,
Color dowColor,
Color spyColor,
Color nasColor) {
List series = [];

series.add(
SplineSeries<MarketData, String>(
animationDuration: 0,
dataSource: dowMarket,
color: dowColor,
// emptyPointSettings: EmptyPointSettings(mode: EmptyPointMode.drop),
xValueMapper: (MarketData data, _) {
return data.date!;
},
yValueMapper: (MarketData data, _) =>
data.percentageChange == 12434443355555
? null
: data.percentageChange),
);

series.add(
SplineSeries<MarketData, String>(
animationDuration: 0,
dataSource: nasMarket,
color: nasColor,
// emptyPointSettings: EmptyPointSettings(mode: EmptyPointMode.drop),
xValueMapper: (MarketData data, _) {
return data.date!;
},
yValueMapper: (MarketData data, _) =>
data.percentageChange == 12434443355555
? null
: data.percentageChange),
);

series.add(
SplineSeries<MarketData, String>(
animationDuration: 0,
dataSource: spyMarket,
color: spyColor,
xValueMapper: (MarketData data, _) {
return data.date!;
},
yValueMapper: (MarketData data, _) =>
data.percentageChange == 12434443355555
? null
: data.percentageChange),
);

return series;
}`

[PreethikaSelvam]

Hi @Nick141620,

We have analyzed your query and found that you have used a CategoryAxis as the primaryXAxis. According to our current implementation, the arrangeByIndex property in CategoryAxis is false, when the arrangeByIndex property is false, by default the data points will be grouped and plotted based on the x-values. This is a current behavior.

For example: If arrangeByIndex property is false and data points have a x values of apple, banana, apple, orange and graphs. Here the duplicate x values is apples, according to default behavior the duplicate x value will considered as a single group, so the x axis label will not render twice.

Output Screenshot:

According to our current behavior we can’t be able to replicate the reported issue with and without duplicate x value in the data points.

However, we can replicate the reported issue when enabling the arrangeByIndex property in CategoryAxis, with a duplicate x-value in the data points. This is because when enabling the arrangeByIndex property, the data points can't be grouped and rendered based on the data point index.

For example: When the arrangeByIndex property is true and data points have a x values of apple, banana, apple, orange and graphs. Here the duplicate x values is apples, according to the implementation each data points has a unique data point index, so axis label will render twice for apple.

Output Screenshot:

Therefore, we suspect that you have enabled the arrangeByIndex property in CategoryAxis with a duplicate x-value in the data points. Therefore, we suggest removing or replacing the duplicate x value from your dataSource or disabling the arrangeByIndex property. We have shared an output below.

Case 1: Duplicate x value with arrangeByIndex as true with as container width as MediaQuery.of(context).size.width - 20:

Case 2: Duplicate x value with arrangeByIndex as false with as container width as MediaQuery.of(context).size.width - 20:

If you still face the issue after updating the arrangeByIndex property or your dataSource without duplicate x values, we kindly request you to try replicating the reported issue in the test sample attached below. Please revert to us so that we can assist you in a better way.

Regards,
Preethika Selvam.
gh1933.zip

[Nick141620]

Thanks issue has been resolved after changing interval