labelsExtent property

Specifies the fixed width for the axis labels. This width represents the space between axis line and axis title, if value exceeds the maximum size of the axis label.

If the labelsExtent value is greater than the axis label width, and no maximumLabelWidth is specified, the additional space defined by labelsExtent will be applied between the axis line and the axis title. If maximumLabelWidth is specified, extra space is applied only if labelsExtent exceeds the maximumLabelWidth.

When multi-level labels are enabled, labelsExtent does not account for their size; it only considers the axis label width. However, if the labelsExtent value exceeds the axis label width, the extra space will be applied between the axis title and the multi-level label.

If the labelPosition is set to 'ChartDataLabelPosition.inside', and if labelsExtent value exceeds the axis label width or maximumLabelWidth, additional space will be added between the axis line and the axis title.

The labelsExtent property is especially useful when arranging the multiple charts in a column layout, as it ensures that the Y-axis bounds appear evenly aligned across all charts for better visual consistency.

Additionally, if an axis label width or maximumLabelWidth is within the specified value, white space will be added at the beginning for remaining width.This is done to maintain uniform bounds and to eliminate axis label flickering on zooming/panning.

Complete label text will be shown in a tooltip when tapping/clicking over the trimmed axis labels.

Defaults to null.

Widget build(BuildContext context) {
    return Container(
        child: SfCartesianChart(
           primaryXAxis: CategoryAxis(labelsExtent: 70),
           series: [
             BarSeries<ChartData, String>(
               dataSource: <ChartData>[
                 ChartData(x: 'Goldin Finance 117', y: 597),
                 ChartData(x: 'Ping An Finance Center', y: 599),
                 ChartData(x: 'Makkah Clock Royal Tower', y: 601),
                 ChartData(x: 'Shanghai Tower', y: 632),
                 ChartData(x: 'Burj Khalifa', y: 828)
               ],
               xValueMapper: (ChartData sales, _) => sales.x,
               yValueMapper: (ChartData sales, _) => sales.y
             )
           ],
       )
    );
}

Implementation

ChartAxis class