How to change the time format to 24h and not am/pm?

[Alex]

Hi guys,

In my chart I have many entries over a long period of time (many months). In my case, the user can zoom in to see the entries in more detail. The problem is when the user zooms in very close, the time format is like 10pm, but I want it to be in the 24h format, like 22:00.

I've already tried the localization with SfGlobalLocalizations, but it doesn't change anything. I'm also tried to set the date format in the chart itself. The problem there is that the date format isn't dynamically anymore, like it should show the month's name first and after the user zooms in it should change to the time format. However, that's not possible when I set a fixed date format.

Does anyone have any idea how I can change the date format so that it is still dynamic?

[Hariharasudhan Kanagaraj]

Hi Alex,

Using axisLabelFormatter callback, you can achieve your requirement by modifying the text of the axis labels based on the currentDateFormat property. In the shared snippet below, we have modified the text of the axis labels into 24-hour time format when they render as 12-hour time format.

class _MyHomePageState extends State<MyHomePage> {

  late ZoomPanBehavior behavior;

  late List<ChartSampleData> _data;

 

  @override

  void initState() {

    behavior = ZoomPanBehavior(

      enableMouseWheelZooming: true,

    );

    _data = <ChartSampleData>[

      ChartSampleData(DateTime(2023, 01, 01, 12), 40),

      ChartSampleData(DateTime(2023, 02, 01, 12), 60),

      ChartSampleData(DateTime(2023, 03, 01, 12), 80),

      ChartSampleData(DateTime(2023, 04, 01, 12), 90),

      ChartSampleData(DateTime(2023, 05, 01, 12), 20),

      ChartSampleData(DateTime(2023, 06, 01, 12), 30),

      ChartSampleData(DateTime(2023, 07, 01, 12), 50),

      ChartSampleData(DateTime(2023, 08, 01, 12), 70),

      ChartSampleData(DateTime(2023, 09, 01, 12), 60),

      ChartSampleData(DateTime(2023, 10, 01, 12), 30),

    ];

    super.initState();

  }

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: SfCartesianChart(

        primaryXAxis: DateTimeAxis(

          axisLabelFormatter: (AxisLabelRenderDetails axisLabelRenderArgs) {

            String? value = axisLabelRenderArgs.currentDateFormat;

            if (value != null && value == DateFormat.j().pattern) {

              DateTime dateTime = DateTime.fromMillisecondsSinceEpoch(

                axisLabelRenderArgs.value.toInt(),

              );

              DateFormat format = DateFormat('HH:mm');

              return ChartAxisLabel(

                  format.format(dateTime), axisLabelRenderArgs.textStyle);

            } else {

              return ChartAxisLabel(

                  axisLabelRenderArgs.text, axisLabelRenderArgs.textStyle);

            }

          },

        ),

        primaryYAxis: NumericAxis(),

        series: <CartesianSeries<ChartSampleData, DateTime>>[

          ColumnSeries<ChartSampleData, DateTime>(

            dataSource: _data,

            xValueMapper: (ChartSampleData sales, int index) => sales.x,

            yValueMapper: (ChartSampleData sales, int index) => sales.y,

          ),

        ],

        zoomPanBehavior: behavior,

      ),

    );

  }

}

Also attached the recording below for your reference. If you have further queries, please get back to us.

Regards,
Hari Hara Sudhan. K.

Attachment: 183761_74382e34.zip

[Alex]

Hi Hari Hara Sudhan. K. 

I greatly appreciate your help, it works perfectly.

Regards,
Alex

[Hariharasudhan Kanagaraj]

Hi Alex,

Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.

Regards,

Hari Hara Sudhan. K.