Create a customised bar graph using SfCartesianChart

Question

I have tried creating this bar graph using SfCartesianChart, and have been able to complete 95% of it, but unable to remove the middle labels.

...

Answer 1

Lobo,

Greetings from Syncfusion.

We have validated your query and we have achieved your requirement by using the axisLabelFormatter callback in axis. We have rendered the first and last axis labels alone using this axisLabelFormatter callback, and its invoked while rendering each axis label in the chart. Please refer the following code snippet.

Code snippet :

     Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Syncusion flutter charts'),
          centerTitle: true,
        ),
        body: SfCartesianChart(
          primaryXAxis: CategoryAxis(
            axisLabelFormatter: (AxisLabelRenderDetails details) {
              String text = details.value == 0
                  ? 'Jun 2022'
                  : details.value == chartData.length - 1
                      ? 'Mar 2022'
                      : "";
              return ChartAxisLabel(text, details.textStyle);
            },
            majorGridLines: const MajorGridLines(width: 0),
            majorTickLines: const MajorTickLines(width: 0),
          ),
          primaryYAxis: NumericAxis(
            isVisible: false,
            majorTickLines: const MajorTickLines(width: 0),
            majorGridLines: const MajorGridLines(width: 0),
          ),
          series: <ChartSeries<ChartSampleData, String>>[
            ColumnSeries<ChartSampleData, String>(
                dataSource: chartData,
                dataLabelSettings: const DataLabelSettings(isVisible: true),
                xValueMapper: (ChartSampleData sales, _) => sales.x,
                yValueMapper: (ChartSampleData sales, _) => sales.y),
          ],
        ),
      ),
    );
  }
}

class ChartSampleData {
  ChartSampleData(this.x, this.y);
  final String? x;
  final double? y;
}

final List<ChartSampleData> chartData = [
  ChartSampleData('jan', 50.56),
  ChartSampleData('Feb', 49.42),
  ChartSampleData('Mar', 53.21),
  ChartSampleData('Apr', 64.78),
  ChartSampleData('May', 59.97),
];

ScreenShot: Syncfusion Custom Axis Label

Regards,

Lokesh Palani.