I try to implement grouping date/time in this combination chart following this image. I using flutter_echarts. I just want it display time list 8 hours.Does flutter_echart support grouping time like this image?

Code

void _prepareChartData() {
  DateFormat inputFormat = DateFormat("dd/MM/yyyy HH:mm");
  List<List<dynamic>> rainfallData = [];
  List<List<dynamic>> waterLevelData = [];
  Set<DateTime> uniqueDates = {};

  for (var data in widget.detailsData) {
    DateTime dateTime = inputFormat.parse(data.dateTime);
    DateTime truncatedDate = DateTime(dateTime.year, dateTime.month, dateTime.day);
    uniqueDates.add(truncatedDate);
  }

  List<DateTime> forcedTimeStamps = uniqueDates.toList()
    ..sort((a, b) => apareTo(b));

  for (var data in widget.detailsData) {
    DateTime dateTime = inputFormat.parse(data.dateTime);
    int timestamp = dateTime.millisecondsSinceEpoch;
    rainfallData.add([timestamp, data.cleanRainfall]);
    waterLevelData.add([timestamp, data.cleanWaterLevel]);
  }

  _echartOption = '''
  {
    "tooltip": {
      "trigger": "axis",
      "axisPointer": {
        "type": "cross",
        "crossStyle": {
          "color": "#999"
        }
      }
    },
    "legend": {
      "data": ["Rainfall", "Water Level"]
    },
    "grid": {
      "left": "10%",
      "right": "10%",
      "bottom": "15%",
      "containLabel": true
    },
    "xAxis": {
      "type": "time",
      "min": ${forcedTimeStamps.first.millisecondsSinceEpoch},
      "max": ${forcedTimeStamps.last.add(Duration(hours: 24)).millisecondsSinceEpoch},
      "interval": 28800000,
      "minInterval": 28800000,
      "maxInterval": 28800000,
      "axisLabel": {
        "rotate": 90,
        "formatter": function(value) {
          console.log('X-Axis Value:', value);
          var date = new Date(value);
          console.log('Date Object:', date);
          var hours = date.getHours();
          console.log('Hours:', hours);
          var day = ('0' + date.getDate()).slice(-2);
          var month = ('0' + (date.getMonth() + 1)).slice(-2);
          var year = date.getFullYear();
          var formattedTime = ('0' + hours).slice(-2) + ':00';

          if (hours === 0) {
            console.log('Midnight:', day + '/' + month + '/' + year + ' ' + formattedTime);
            return day + '/' + month + '/' + year + ' ' + formattedTime;
          } else if (hours === 8 || hours === 16) {
            console.log('8 or 16:', '\\n                   ' + formattedTime);
            return '\\n                   ' + formattedTime;
          }
          console.log('Other hours:', '');
          return '';
        }
      },
      "splitLine": {"show": true},
      "axisPointer": {
        "label": {
          "formatter": function(params) {
            var date = new Date(params.value);
            var day = ('0' + date.getDate()).slice(-2);
            var month = ('0' + (date.getMonth() + 1)).slice(-2);
            var year = date.getFullYear();
            var hours = ('0' + date.getHours()).slice(-2);
            var minutes = ('0' + date.getMinutes()).slice(-2);
            return day + '/' + month + '/' + year + ' ' + hours + ':' + minutes;
          }
        }
      }
    },
    "yAxis": [
      {
        "type": "value",
        "name": "Rainfall (mm)",
        "nameLocation": "middle",
        "nameGap": 30,
        "nameRotate": 90,
        "axisLabel": { "formatter": "{value}" },
        "splitLine": { "show": true, "lineStyle": { "color": "#eee" } }
      },
      {
        "type": "value",
        "name": "Water Level (m)",
        "nameLocation": "middle",
        "nameGap": 30,
        "nameRotate": 90,
        "axisLabel": { "formatter": "{value}" },
        "splitLine": { "show": true, "lineStyle": { "color": "#eee" } }
      }
    ],
    "series": [
      {
        "name": "Rainfall",
        "type": "bar",
        "data": ${jsonEncode(rainfallData)},
        "yAxisIndex": 0,
        "itemStyle": { "color": "rgba(173, 216, 230, 0.7)" }
      },
      {
        "name": "Water Level",
        "type": "line",
        "data": ${jsonEncode(waterLevelData)},
        "yAxisIndex": 1,
        "itemStyle": { "color": "blue" },
        "lineStyle": { "width": 2 },
        "symbol": "circle",
        "symbolSize": 1
      }
    ]
  }
  ''';
}

It. just return 01/02/2025 00:00. Refer bellow image. It suppose display like this

01/02/2025 00:00 08:00 16:00

Thanks in advance!