How to format the date-time axis labels in Cartesian chart (SfCartesianChart)?
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;
@override
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)
];
super.initState();
}
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.
SfCartesianChart( primaryXAxis: DateTimeAxis(), series: <LineSeries<SeriesData, DateTime>>[ LineSeries( 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.
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(
DateTime.fromMillisecondsSinceEpoch(
axisLabelRenderArgs.value.toInt()));
const TextStyle style =
TextStyle(color: Colors.teal, fontWeight: FontWeight.bold);
return ChartAxisLabel(text, style);
},
)
Using axisLabelFormatter callback achieved the following axis label format.
