Dynamically create series in stacked bar chart

[Tom Saunders]

Hi, 

I'm trying to create a stacked bar chart showing a person's income and expenses over time (see mockup below). 

I'd like to be able to create the series (i.e. column sections like e.g. 'Supermarket') dynamically, because these can vary from period to period, and also because in the app I'm building a user can add their own income and expense categories. I'm not sure how to do this, can you help me? 

I know my request is similar to this one (link), I'm just not able to translate the guidance for a line series into a stacked bar chart. 

I was planning to structure my data as shown below (but I can change it as required): 

Any help appreciated 

[Thilip Chandru Soundraraj]

Hi Tom Saunders,

You can achieve your requirement by adding multiple stacked column series in chart. Refer the following steps to achieve your requirement: 

1. To render the series based on income and expense in category, you can use  groupName property in series. Using this feature you can render the stacked series in side-by-side based on category.

                  StackedColumnSeries<ChartData, String>(

                      groupName: 'Income',

                      dataSource: chartData1,

                      xValueMapper: (ChartData data, _) => data.x,

                      yValueMapper: (ChartData data, _) => data.y),

                  StackedColumnSeries<ChartData, String>(

                      groupName: 'Expense',

                      dataSource: chartData2,                                              

                      xValueMapper: (ChartData data, _) => data.x,

                      yValueMapper: (ChartData data, _) => data.y),

     2. To display the custom label in the chart series, you can use builder in series data label settings.

StackedColumnSeries<ChartData, String>(

                      dataLabelSettings: DataLabelSettings(

                        isVisible: true,

                        builder:

                            (data, point, series, pointIndex, seriesIndex) {

                          return SizedBox(

                              height: 50,

                              width: 100,

                              child: Text(data.category));

                        },

                      ),

                      dataSource: chartData1,

                      groupName: 'Income',

                      xValueMapper: (ChartData data, _) => data.x,

                      yValueMapper: (ChartData data, _) => data.y),

     3. To add data points dynamically, you can use updateDataSource method in ChartSeriesController. You can refer the UG link below for your reference. 

UG link : https://help.syncfusion.com/flutter/cartesian-charts/methods#updatedatasource.

We have attached simple sample for your reference and modify it based on your requirement. If you have any further queries, please get back to us. We are always happy to assist you.

Attachment: fm_194506_20696c1.zip

[Tom Saunders]

Hi @Thilip,

Thank you for your help, much appreciated. I will try your suggestions above, if I have any questions I will let you know.

Kind Regards

Tom

[Thilip Chandru Soundraraj]

Hi Tom Saunders,

You are most welcome. Please get back to us if you need any other assistance, we are happy to assist as always.

 

Regards,

Thilip Chandru.