How to use DateTime values in the y-axis (SfCartesianChart) ?
In this article, we described how to use DateTime values in y-axis using the callback event in the cartesian chart.
The Flutter Cartesian Chart widget provides support for customizing the axis labels in the chart using the callback event on rendering. A callback event is a callback function or method, which you pass as an argument to another function or method and can perform an action when you require it. If you want to display DateTime values in the y-axis of the cartesian chart, then you can use the NumericAxis to achieve it by converting the DateTime values to millisecondsSinceEpoch integer values and map them to the chart’s y-axis. On rendering, you can use the axisLabelFormatter event to customize the axis label values which are in millisecondsSinceEpoch integer values to DateTime values. So that the numeric y-axis values will be displayed with DateTime values.
Refer the following instructions, for customizing the axis labels to display the DateTime values in the y-axis using the callback event.
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
