How can i Plot Hours on x-axis with the interval of 2:00 hrs, Based on 12- hour Format? (Syncfusion Flutter Charts)

Question

What i'm trying to achieve is I want to plot hours on x-axis for next 12-hours starting from current hour, with the interval of 2:00 hours, But based on 12-hour format, I've added an image below for reference of what i'm trying to achieve. and i'm using syncfusion flutter chart library.

I want my x-axis to plot like 8:00 AM....10:00 AM....12:00 PM....2:00 PM...4:00 PM...

So after 12:00 i want 2:00 rather than 14:00 and the differences of AM and PM as well.

Any help/Suggestions on how can i achieve this in flutter? I've added code below.

/// Returns the Cartesian chart with default numeric x and y axis.
 SfCartesianChart getChart() {
  return SfCartesianChart(
  plotAreaBorderWidth: 0,
  legend: Legend(isVisible: true, position: LegendPosition.top),

  /// X axis as datetime axis placed here.
  primaryXAxis: DateTimeAxis(
    minimum: DateTime.now(),
    intervalType: DateTimeIntervalType.hours,
    desiredIntervals: 2,
    interval: 2,
    maximum: DateTime.now().add(
      Duration(hours: 12, minutes: 59, seconds: 59),
    ),
  ),
  primaryYAxis: NumericAxis(
      title: AxisTitle(text: 'Peak Occupancy (%)'),
      axisLine: AxisLine(width: 0),
      majorTickLines: MajorTickLines(size: 0)),
  series: getDefaultNumericSeries(),
  tooltipBehavior: TooltipBehavior(
      enable: true, format: 'Score: point.y', canShowMarker: false),
);
}

/// Returns the list of Chart series
/// which need to render on the default numeric axis.
List<ColumnSeries<ChartSampleData, DateTime>> getDefaultNumericSeries() {
int currentYear = DateTime.now().year;
int currentMonth = DateTime.now().month;
int currentDay = DateTime.now().day;
int currentHour = DateTime.now().hour;

int getHour(int hour) {
  return (DateTime.now().add(Duration(hours: hour))).hour;
}

final List<ChartSampleData> chartData = <ChartSampleData>[
  ChartSampleData(
    xValue: DateTime(currentYear, currentMonth, currentDay, currentHour),
    yValue: 240,
    secondSeriesYValue: 236,
  ),
  ChartSampleData(
      xValue: DateTime(currentYear, currentMonth, currentDay, getHour(4)),
      yValue: 250,
      secondSeriesYValue: 242),
  ChartSampleData(
      xValue: DateTime(currentYear, currentMonth, currentDay, getHour(8)),
      yValue: 281,
      secondSeriesYValue: 313),
  ChartSampleData(
      xValue: DateTime(currentYear, currentMonth, currentDay, getHour(12)),
      yValue: 358,
      secondSeriesYValue: 359),
  ChartSampleData(
      xValue: DateTime(currentYear, currentMonth, currentDay, getHour(16)),
      yValue: 237,
      secondSeriesYValue: 272)
];
return <ColumnSeries<ChartSampleData, DateTime>>[
  ///first series named "Australia".
  ColumnSeries<ChartSampleData, DateTime>(
      dataSource: chartData,
      color: const Color(0xff000000),
      //Color.fromRGBO(237, 221, 76, 1),
      name: 'Today',
      xValueMapper: (ChartSampleData sales, _) => sales.xValue,
      yValueMapper: (ChartSampleData sales, _) => sales.secondSeriesYValue),

  ///second series named "India".
  ColumnSeries<ChartSampleData, DateTime>(
      dataSource: chartData,
      color: const Color(0XFF808080).withOpacity(0.5),
      //Color.fromRGBO(2, 109, 213, 1),
      xValueMapper: (ChartSampleData sales, _) => sales.xValue,
      yValueMapper: (ChartSampleData sales, _) => sales.yValue,
      name: 'Previous Week'),
];
}

Solution

As @rickimaru pointed out, you have to set the dateFormat parameter in the DateTimeAxis constructor.

Looking at the DateFormat documentation, the DateFormat.jm() constructor seems to do what you want.

  primaryXAxis: DateTimeAxis(
    minimum: DateTime.now(),
    intervalType: DateTimeIntervalType.hours,
    desiredIntervals: 2,
    interval: 2,
    maximum: DateTime.now().add(
      Duration(hours: 12, minutes: 59, seconds: 59),
    ),

    // sets the date format to 12 hour
    dateFormat: DateFormat.jm(),
  )

Comments

[rickimaru]

Have you tried setting the dateFormat in DateTimeAxis? api.flutter.dev/flutter/intl/DateFormat-class.html