Category Axis Label Ticks not visible

[benjamin-swain]

Below you can see that the majorTickLines are not visible for most of x-axis. How do I make all the tick lines appear (even if there is not room to display the label below the tick)?

Code:

SfCartesianChart(
              plotAreaBorderWidth: 0,
              borderWidth: 0,
              margin: EdgeInsets.only(left: 0, right: 0, top: 10, bottom: 5),
              zoomPanBehavior: ZoomPanBehavior(
                enablePanning: true,
              ),
                ),
              primaryXAxis: CategoryAxis(
                visibleMaximum: dataContainer['categoriesPlotSeries'].last.dataSource.length <= 7 ? null : 6.5,
                plotOffset: 10,
                isInversed: true,
                edgeLabelPlacement: EdgeLabelPlacement.shift,
                labelIntersectAction: AxisLabelIntersectAction.wrap,
                majorGridLines: MajorGridLines(width: 0),
                labelStyle: ChartTextStyle(color: xLabelColor, fontWeight: FontWeight.w500, fontSize: labelSize),
                axisLine: AxisLine(width: 0),
              ),
              primaryYAxis: NumericAxis(
                minimum: 0,
                maximum: 100,
                interval: 25,
                rangePadding: ChartRangePadding.none,
                axisLine: AxisLine(width: 0),
                majorTickLines: MajorTickLines(size: 0),
                labelStyle: ChartTextStyle(color: yLabelColor, fontWeight: FontWeight.w500, fontSize: labelSize),
                labelPosition: ChartDataLabelPosition.outside,
                majorGridLines: MajorGridLines(color: horizGridColor, width: horizGridWidth),
              ),
              series: dataContainer['categoriesPlotSeries'],
              tooltipBehavior:
                  TooltipBehavior(enable: true, format: 'series.name', header: ''),
            )

[dharanidharandharmasivam]

Hi @opalr ,

Greetings from Syncfusion. We would like to let you know that, the axis range will be calculated based on the data source, axis size in case of the range is not specified. Based on the axis values respective tick lines will be shown. In your case, you can specify the interval of the CategoryAxis as one and we would like to let you know that, by default in the category axis, the labelPlacement will be betweenTicks, you can also specify this to onTicks, so that all the axis labels and ticks will be visible. Find the code snippet below to achieve this scenario and this can be changed based on your requirement.

SfCartesianChart(
        primaryXAxis: CategoryAxis(
          interval: 1,
          labelPlacement: LabelPlacement.onTicks,
        ),
        // Other configuration
      )

The sample for reference can be found below.
https://www.syncfusion.com/downloads/support/directtrac/general/ze/category-751169080

For more information on axis customization, find the user guide form below.
https://help.syncfusion.com/flutter/chart/axis-customization

Thanks,
Dharani

[benjamin-swain]

That fixed the label placement, but now the right side of the plot is cut off. Is there a way to add some padding to the right side so you can see the full bar, plus some space before the right edge?

I also hid the tick marks because I think it looks better this way. For some reason the labelIntersectionAction (overlap) started working after this change.

[dharanidharandharmasivam]

Hi @opalr ,

Your requirement can be achieved using the rangePadding property of the axis. Here you can specify the rangePadding as additional to achieve your scenario. Find the code snippet below to achieve this

SfCartesianChart(
  primaryXAxis: CategoryAxis(
    rangePadding: ChartRangePadding.additional
  ),
)

Hope this helps.

Thanks,
Dharani.

[jpbigmotive]

@dharanidharandharmasivam Did you ever get this issue solved?