Unable to use grouped labels for dates in Syncfusion chart

Question

I am trying to create a chart like this that requires grouped labels for range of dates.

I have tried using multilevel labels but I am not able to customize their design to look like the requirement. The ideal solution for me would be to find a way to group the primary x-axis labels rather than using multilevel labels. Anyone please help me. Here is my code:

      SizedBox(
      height: 30.h,
      child: SfCartesianChart(
        onAxisLabelTapped: ((axisLabelTapArgs) => print(axisLabelTapArgs.value)),
        plotAreaBorderWidth: 0,
        primaryYAxis: ChartHelper.buildNumericYAxis(textTheme),
        primaryXAxis: ChartHelper.buildDateTimeXAxis(),
        enableAxisAnimation: true,
        zoomPanBehavior: ChartHelper.buildZoomPanBehavior(),
        series: <ChartSeries>[
          if (provider.showPainCurve) ChartHelper.buildPainCurve(),
          if (provider.showBleedingCurve) ChartHelper.buildBleedingCurve(),
        ],
      ),
    ),

      static DateTimeAxis buildDateTimeXAxis() {
return DateTimeAxis(

  axisLine: const AxisLine(width: 0),
  labelIntersectAction: AxisLabelIntersectAction.hide,
  enableAutoIntervalOnZooming: false,
  interval: 1,
  autoScrollingMode: AutoScrollingMode.end,
  isVisible: true,
  autoScrollingDelta: 20,
  autoScrollingDeltaType: DateTimeIntervalType.days,
  majorGridLines: const MajorGridLines(
    width: 0.5,
    color: Color(0xFFFFDBCE),
  ),
  majorTickLines: const MajorTickLines(size: 0, width: 0),
  labelStyle: const TextStyle(height: 0, color: Colors.transparent),
);

}

Answer 1

We understand that you need to group the x-axis labels of the multiple series based on your query and currently, there is no option to group the x-axis labels using the DateTimeAxis. However, you can group the x-axis labels of the multiple series by using the arrangeByIndex property in the Category Axis. The Category Axis is implemented based on indexing, so if the arrangeByIndex property is enabled, the x-axis labels of the multiple series will be grouped together based on their indexes.

Shared the User Guide documentation and Sample Browser links below regarding the arrangeByIndex in the Category Axis for your reference.

UG: https://help.syncfusion.com/flutter/cartesian-charts/axis-types#indexed-category-axis.

SB: https://flutter.syncfusion.com/#/cartesian-charts/axis-types/category/arranged-by-index.