How to use DateTime values in the y-axis (SfCartesianChart) ?
In this article, we described how to use DateTime values in the y-axis using callback events in the Flutter Cartesian chart.
The Flutter Cartesian Chart widget provides support for customizing axis labels using callback events on rendering. A callback event is a function or method that you pass as an argument to another function or method, which performs an action when triggered.
To display DateTime values in the y-axis of a Cartesian chart, you can use the NumericAxis by converting DateTime values to millisecondsSinceEpoch integer values and mapping them to the chart's y-axis. On rendering, you can use the axisLabelFormatter event to customize the axis label values from millisecondsSinceEpoch integers to formatted DateTime values. This allows numeric y-axis values to be displayed as DateTime values.
Follow these steps to display DateTime values in the y-axis using callback events:
Step 1: First, initialize the chart data source with the necessary x-values and DateTime y-values.
List<EmployeeData> chartData = <EmployeeData>[ EmployeeData( empName: 'Jack', checkinTime: DateTime(2020, 12, 22, 13, 05, 03)), EmployeeData( empName: 'Drake', checkinTime: DateTime(2020, 12, 22, 13, 18, 04)), EmployeeData( empName: 'Aron', checkinTime: DateTime(2020, 12, 22, 13, 22, 05)), EmployeeData( empName: 'John', checkinTime: DateTime(2020, 12, 22, 13, 33, 06)), EmployeeData( empName: 'Shawn', checkinTime: DateTime(2020, 12, 22, 13, 20, 07)) ];
Step 2: Initialize the SfCartesianChart with the required properties along with x-axis as CategoryAxis and y-axis as NumericAxis. In the yValueMapper, convert the DateTime y-values (checkinTime) in the chart data source to millisecondsSinceEpoch and map them to the chart.
SfCartesianChart(
title: ChartTitle(text: 'Check-in time 22-Dec-2020'),
primaryXAxis: CategoryAxis(),
primaryYAxis: NumericAxis(
title: AxisTitle(text: 'HH:MM:SS'),
rangePadding: ChartRangePadding.additional,
// Assigned a name for the y-axis for customization purposes
name: 'primaryYAxis'
),
series: <ColumnSeries<EmployeeData, String>>[
ColumnSeries<EmployeeData, String>(
// Assigned the data source for the chart series.
dataSource: chartData,
xValueMapper: (EmployeeData data, _) => data.empName,
yValueMapper: (EmployeeData data, _) {
// Converted the date time y-values from the chart data source to millisecondSinceEpoch
// integer values and then mapped to numeric y-axis.
return data.checkinTime.millisecondsSinceEpoch;
},
dataLabelSettings: DataLabelSettings(isVisible: true),
markerSettings: MarkerSettings(isVisible: true))
]
)
Step 3: Define the axisLabelFormatter event in primaryYAxis widget and customize the y-axis label to render the mapped millisecondsSinceEpoch integer values in the y-axis as DateTime values by using the fromMillisecondsSinceEpoch() method of the DateTime class and then assign the DateTime values to the text argument of the event in the necessary DateTime format. Similarly, if you need to customize the data labels also to render in the DateTime format, then you can follow the same process done in the following code snippet using the onDataLabelRender event.
axisLabelFormatter: (AxisLabelRenderDetails args) {
late String text;
print(args.value);
text = DateTime.fromMillisecondsSinceEpoch(
args.value.toInt())
.hour
.toString() +
':' +
DateTime.fromMillisecondsSinceEpoch(args.value.toInt())
.minute
.toString() +
':' +
DateTime.fromMillisecondsSinceEpoch(args.value.toInt())
.second
.toString();
return ChartAxisLabel(text, args.textStyle);
},
Thus, the customization of numeric y-axis to render the DateTime values can be done.
Screenshots
