How to make multiple chart series of different lengths with Flutter Syncfusion SfCartesianChart

Question

I have large sorted list of lists, where each sublist keeps elements of specific day. I’m trying to represent this data using SfCartesianChart with multiple charts, but in my case each day-list have random number of items.

One of results: result

And what I'm trying to display: expected

Also I would like to create 2-leveled label with number of column and day date. I've tried many approaches, but multiple ColumnSeries doesn't seem right to me... Here's my simplest version of code:

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() {
  runApp(const MyHomePage());
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final List<MyEvent> dayOne = <MyEvent>[
    MyEvent('2023-07-01T15.22', 11),
    MyEvent('2023-07-01T17.43', 10),
    MyEvent('2023-07-01T19.44', 16),
    MyEvent('2023-07-01T23.34', 13),
  ];

  final List<MyEvent> dayTwo = <MyEvent>[
    MyEvent('2023-12-23T08.13', 3),
    MyEvent('2023-12-23T19.55', 4),
  ];
  
  final List<MyEvent> dayThree = <MyEvent>[
    MyEvent('2023-12-27T06.04', 14),
    MyEvent('2023-12-27T10.13', 12),
    MyEvent('2023-12-27T11.46', 11),
  ];
  
  final List<MyEvent> dayFour = <MyEvent>[
    MyEvent('2023-12-31T06.04', 5),
  ];
  
  
  late List<List<MyEvent>> list = [dayOne,dayTwo, dayThree, dayFour];
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            height: 300.0,
            child: SfCartesianChart(
              primaryXAxis: CategoryAxis(
                axisLabelFormatter: (details){
                  return ChartAxisLabel(details.text.substring(8,10), const TextStyle(fontSize: 8.0));
                }
              ),
              
              primaryYAxis: NumericAxis(),
              series: List.generate(list.length, (index) {
                return ColumnSeries(
                     dataSource: list[index],
                     xValueMapper: (MyEvent event, i) => event.date,
                     yValueMapper: (MyEvent event, _) => event.value,
                   );
              }),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

You can achieve your requirement by using two ColumnSeries in the SfCartesianChart. We have shared a code snippet, user guide documentation and SB link for your reference. Please let us know if you need any further assistance.

code snippet:

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() {
  runApp(const MyHomePage());
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
     final List<MyEvent> dayOne = <MyEvent>[
           MyEvent('Myanmar', 11),
           MyEvent('India', 10),
           MyEvent('Bangladesh', 16),
           MyEvent('Singapore', 13),
         ];

     final List<MyEvent> dayTwo = <MyEvent>[
          MyEvent('Poland', 3),
          MyEvent('Australia', 4),
    ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            height: 300.0,
            width: 300.0,
            child: SfCartesianChart(
              primaryXAxis: CategoryAxis(),
              primaryYAxis: NumericAxis(),
              series: <ColumnSeries<MyEvent, String>>[
                ColumnSeries(
                  dataSource: dayOne,
                  xValueMapper: (MyEvent list, _) => list.date,
                  yValueMapper: (MyEvent list, _) => list.value,
                ),
                ColumnSeries(
                  dataSource: dayTwo,
                  xValueMapper: (MyEvent list, _) => list.date,
                  yValueMapper: (MyEvent list, _) => list.value,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class MyEvent {
  MyEvent(this.date, this.value);
  final String date;
  final double value;
}

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

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

Note:

By default, the datapoints in the CategoryAxis are arranged based on the x-values. However, in this code snippet, you can arrange the index based on the index value.

Regards,

Lokesh.