StackedColumnSeries how to stack on top
Hi John,
A stacked column chart is used to display and compare multiple categories of data with the help of vertical bars. Each bar represents a category, and it is divided into segments that represent subcategories. The subcategories are stacked on top of each other to show their cumulative effect on the total value of the category. This allows for easy comparison between the categories and their respective subcategories, as well as an overall comparison of the total value of each category. The stacked column chart is commonly used in business and finance to visualize sales, revenue, expenses, and other related data. To achieve your requirement for StackedColumnSeries, we have provided a code snippet and a user guide for your reference. Kindly inform us if you require any additional assistance.
Code Snippet:
|
late List<ChartSampleData> chartData;
@override void initState() { chartData = <ChartSampleData>[ ChartSampleData("1", 50, 55, 72), ]; super.initState(); }
SfCartesianChart( series: <ChartSeries>[ StackedColumnSeries<ChartSampleData, String>( dataSource: chartData, xValueMapper: (ChartSampleData data, _) => data.x, yValueMapper: (ChartSampleData data, _) => data.y1, ), StackedColumnSeries<ChartSampleData, String>( dataSource: chartData, xValueMapper: (ChartSampleData data, _) => data.x, yValueMapper: (ChartSampleData data, _) => data.y2, ), StackedColumnSeries<ChartSampleData, String>( dataSource: chartData, xValueMapper: (ChartSampleData data, _) => data.x, yValueMapper: (ChartSampleData data, _) => data.y3, ), ], ),
|
Output:
UG,
https://help.syncfusion.com/flutter/cartesian-charts/chart-types/stacked-column-chart
Regards,
Lokesh.
Hi Seraphina,
Thank you for your previous update and for confirming that the earlier information helped you.
Regarding your latest query on customizing the colors of segments in a Stacked Column Chart, we can indeed enhance the visual distinction between subcategories by applying custom colors. You can customize the appearance using the color property in each series.
Below is a simple example for your reference:
.... @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Stacked Column Sample')), body: Padding( .... series: [ StackedColumnSeries<ChartData, String>( dataLabelSettings: const DataLabelSettings(isVisible: true), dataSource: chartData, xValueMapper: (ChartData sales, _) => sales.x, yValueMapper: (ChartData sales, _) => sales.y1, color: Colors.blue, ), StackedColumnSeries<ChartData, String>( dataLabelSettings: const DataLabelSettings(isVisible: true), dataSource: chartData, xValueMapper: (ChartData sales, _) => sales.x, yValueMapper: (ChartData sales, _) => sales.y2, name: 'Y2', color: Colors.green, ), StackedColumnSeries<ChartData, String>( dataLabelSettings: const DataLabelSettings(isVisible: true), dataSource: chartData, xValueMapper: (ChartData sales, _) => sales.x, yValueMapper: (ChartData sales, _) => sales.y3, name: 'Y3', color: Colors.purpleAccent, ), StackedColumnSeries<ChartData, String>( dataLabelSettings: const DataLabelSettings(isVisible: true), dataSource: chartData, xValueMapper: (ChartData sales, _) => sales.x, yValueMapper: (ChartData sales, _) => sales.y4, name: 'Y4', color: Colors.red, ), ], ), ), ); } .... |
You may also use color mapping or color palettes for more advanced customization. For detailed guidance, please refer to the official documentation below:
Stacked column Chart Color Customization in Flutter Cartesian Charts | Syncfusion
Color mapping for data points in Flutter Cartesian Charts widget | Syncfusion
Color palette in Flutter Cartesian Charts widget | Syncfusion
If this is not the exact use case you are looking for, kindly update us with a screenshot or a short video recording so we can better understand your scenario and assist you more accurately.
We look forward to helping you further.
Regards,
Vallarasu R
