X-Axis Label Missing

[benjamin-swain]

The far right axis label is sometimes missing, as shown below. I kept all the SfCartesianChart parameters the same except for the series parameter, and the far right label disappeared. So it depends on the data provided to the chart. It might be related to having a lot of values in the series, but not sure. The code is also below.

Is there a way to ensure the far right label is visible?
If you need the data to reproduce the issue, let me know and I can provide it.

Code:

SfCartesianChart(
    plotAreaBorderWidth: 0,
    borderWidth: 0,
    margin: EdgeInsets.only(left: 0, right: 0, top: 0, bottom: 5),
    primaryXAxis: DateTimeAxis(
        edgeLabelPlacement: EdgeLabelPlacement.shift,
        isVisible: true,
        majorGridLines: MajorGridLines(width: 0),
        labelStyle: ChartTextStyle(color: xLabelColor, fontWeight: FontWeight.w500, fontSize: labelSize),
        majorTickLines: MajorTickLines(size: 0, color: xLabelColor),
        dateFormat: DateFormat.Md(),
        axisLine: AxisLine(width: 0),
        plotOffset: 0,
        labelPosition: ChartDataLabelPosition.outside,
    ),
    primaryYAxis: NumericAxis(
        isVisible: true,
        rangePadding: ChartRangePadding.round,
        plotOffset: 0,
        opposedPosition: false,
        labelFormat: '\${value}',
        labelPosition: ChartDataLabelPosition.inside,
        placeLabelsNearAxisLine: true,
        labelIntersectAction: AxisLabelIntersectAction.hide,
        edgeLabelPlacement: EdgeLabelPlacement.hide,
        labelStyle: ChartTextStyle(color: yLabelColor, fontWeight: FontWeight.w500, fontSize: labelSize),
        axisLine: AxisLine(width: 0),
        majorTickLines: MajorTickLines(size: 0),
        majorGridLines: MajorGridLines(color: horizGridColor, width: horizGridWidth),
        numberFormat: NumberFormat.compact(),
        interactiveTooltip: InteractiveTooltip(
            enable: true, // when crosshair is used, this controls whether tooltip shows on y-axis
        )
    ),
    series: seriesData,
    trackballBehavior: TrackballBehavior(
        enable: true,
        shouldAlwaysShow: true,
        tooltipAlignment: ChartAlignment.near,
        tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
        lineType: TrackballLineType.vertical,
        lineColor: trackerLineColor,
        lineWidth: trackerLineWidth,
        activationMode: ActivationMode.singleTap,
        tooltipSettings:
            InteractiveTooltip(
                format: 'point.y', 
                borderWidth: 3, 
                borderColor: Colors.transparent, 
                color: tooltipBackgroundColor, 
                textStyle: ChartTextStyle(color: tooltipTextColor, fontSize: 20, fontWeight: FontWeight.w800))
    )
)

[JayavigneshwaranG]

Hi @opalr ,

I have checked this. The axis labels are displayed based on the calculated interval value. In your case, the last data point is less than the calculated interval, so it is not displayed. It won't be replicated in normal/simple data and it occurs only on some specific scenario.

So, if you could share your data too, it would be helpful to analyze at our end and provide the solution sooner.

Thanks,
Jayavigneshwaran

[benjamin-swain]

Data is below. DateTime for x-axis, doubles for y-axis.

2020-04-20
16701.33
2020-04-16
16756.530000000002
2020-04-15
13724.900000000001
2020-04-14
13740.000000000002
2020-04-13
13740.000000000002
2020-04-06
13810.770000000002
2020-04-02
15207.720000000003
2020-04-01
12845.360000000002
2020-03-31
10741.070000000003
2020-03-30
10768.120000000003
2020-03-25
10918.260000000002
2020-03-23
11104.070000000002
2020-03-19
11104.070000000002
2020-03-17
11164.480000000001
2020-03-16
11174.44
2020-03-13
8968.61
2020-03-12
8992.76
2020-03-11
9121.65
2020-03-10
9209.449999999999
2020-03-09
9390.57
2020-03-06
9421.699999999999
2020-03-05
9434.65
2020-03-04
9487.0
2020-03-03
9692.38
2020-03-02
11191.25
2020-02-28
3693.05
2020-02-27
3731.59
2020-02-26
3779.34
2020-02-25
3794.2200000000003
2020-02-24
4001.9500000000003
2020-02-22
3896.3900000000003
2020-02-21
3906.3500000000004
2020-02-20
3980.9300000000003
2020-02-19
3861.6900000000005
2020-02-18
4949.99
2020-02-14
4195.38
2020-02-13
4251.33
2020-02-12
4263.94
2020-02-11
4333.009999999999
2020-02-10
4506.65
2020-02-07
4526.57
2020-02-06
4652.48
2020-02-05
4660.62
2020-02-04
4920.42
2020-02-03
6577.97
2020-01-31
4547.1900000000005
2020-01-29
4631.97
2020-01-28
4703.7300000000005
2020-01-27
4883.710000000001
2020-01-24
4926.250000000001
2020-01-23
4954.020000000001
2020-01-22
5000.010000000001
2020-01-21
5637.340000000001

[SriramKiranSenthilkumar]

Hi @opalr ,

We have analyzed the reported scenario with the data provided and we found the last x-axis label is missing which is due to the range calculation in the axis. The range calculation in the axis depends on the width of the axis i.e., If the width of the chart is smaller but, the calculated range for the axis has to fit in 5 labels to the x-axis then due to smaller width of the axis only 4 labels can be accommodated. This case can be ignored by either customizing the value of the interval property accordingly or by setting range padding as additional which is available in the chart axis. We have created a sample with the provided data and properties and replicated the reported scenario provided a fix by changing the value of interval property. Please refer the code snippet below.

SfCartesianChart(
           primaryXAxis: NumericAxis(
               // axis interval is set to 10
               interval: 10
           )
)

Screenshot:

The sample for reference can be found below.
sample.zip

Also, for further reference on rangePadding and interval, please refer the user guide below.

1. https://help.syncfusion.com/flutter/cartesian-charts/axis-types#applying-padding-to-range
2. https://help.syncfusion.com/flutter/cartesian-charts/axis-types#date-time-intervals

Thanks,
Sriram Kiran.