Articles in this section
Category / Section

How to format the date-time axis labels in Cartesian chart (SfCartesianChart)?

2 mins read

In this article, we explain how to format the date-time values of the axis label in the Flutter cartesian chart.

The SfCartesianChart widget has the DateTimeAxis support, and in this we have dateFormat property and axisLabelFormatter callback, using these you can customize the date-time axis label format.

The following steps explains formatting the axis labels.

Step 1: Initialize the data source.

late List<SeriesData> chartData;
  void initState() {
    chartData = <SeriesData>[
      SeriesData(DateTime(2022, 02, 01), 20),
      SeriesData(DateTime(2022, 02, 02), 10),
      SeriesData(DateTime(2022, 02, 03), 20),
      SeriesData(DateTime(2022, 02, 04), 30),
      SeriesData(DateTime(2022, 02, 05), 20),
      SeriesData(DateTime(2022, 02, 06), 30),
      SeriesData(DateTime(2022, 02, 07), 10),
      SeriesData(DateTime(2022, 02, 08), 20),
      SeriesData(DateTime(2022, 02, 09), 10),
      SeriesData(DateTime(2022, 02, 10), 30)
class SeriesData {
  SeriesData(this.x, this.y);
  final DateTime x;
  final num y;

Step 2: Initialize the SfCartesianChart widget with required properties and bind the data source to the series.

  primaryXAxis: DateTimeAxis(),
  series: <ChartSeries<SeriesData, DateTime>>[
      dataSource: chartData,
      xValueMapper: (SeriesData sales, _) => sales.x,
      yValueMapper: (SeriesData sales, _) => sales.y,

Step 3: Using the dateFormat property in the primaryXAxis, specify the required date format to customize the axis labels and import the following intl package. Here we have used yMd format. To know more on the available date formats, find the formats here.

import 'package:intl/intl.dart';
primaryXAxis: DateTimeAxis(
  dateFormat: DateFormat.yMd(),

Thus, the date time axis with the formatted axis labels is achieved by dateFormat property in DateTimeAxis.

flutter chart axis label format using dateFormat property

Step 4: Also you can customize the axis label format using the axisLabelFormatter callback, here you can return the customized text and text style property using the ChartAxisLabel class.

primaryXAxis: DateTimeAxis(
    axisLabelFormatter: (axisLabelRenderArgs) {
        final String text = DateFormat('EEEE').format(
        const TextStyle style =
              TextStyle(color: Colors.teal, fontWeight: FontWeight.bold);
    return ChartAxisLabel(text, style);

Using axisLabelFormatter callback achieved the following axis label format.

flutter chart axis label format with callback

View sample in the GitHub.

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment