--- title: "Visualizing Global Coal Consumption Trends with Our Flutter Stacked Area Chart" published_at: "2025-04-03T12:41:05+00:00" modified_at: "2025-04-03T12:41:10+00:00" url: "https://www.syncfusion.com/blogs/post/flutter-stacked-area-chart-coal-usage" excerpt: "Learn how to visualize the global coal consumption trends using the Flutter Stacked Area Chart widget." taxonomy_category: - "Chart" - "Chart of the week" - "Desktop" - "Flutter" - "Mobile" - "UI" - "Web" taxonomy_post_tag: - "Charts" - "Data Visualization" - "desktop" - "Flutter" - "Mobile" - "Web" --- [Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week) # Visualizing Global Coal Consumption Trends with Our Flutter Stacked Area Chart [Aswini Suresh Reddy](https://www.syncfusion.com/blogs/author/aswini-suresh-reddy) ![Visualizing Global Coal Consumption Trends with Our Flutter Stacked Area Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2025/04/596-x-334@2x-compressed-1.jpg) **TL;DR:** Let’s visualize global coal consumption trends using the Flutter Stacked Area Chart. We’ll explore how different regions contribute to total coal use over time. This guide covers data preparation, chart customization, and interactive enhancements like image overlays. Learn to build an insightful visualization using our Flutter Charts! Welcome to the **Chart of the Week** blog series! Charts are a great way to visualize the data, making it easier to understand by presenting it clearly and visually. Among the different types of charts, stacked area charts are especially useful for showing how different parts add up to total overtime. They are great for showing patterns, comparing groups, and tracking combined values, helping you see how individual parts contribute to the whole. This makes stacked area charts a good choice for understanding data from multiple groups, like regions or industries, where both individual and overall trends matter. This blog is about showing global coal consumption trends using the Syncfusion [Flutter Stacked Area Chart](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-area-chart) . We’ll see how to create an interactive chart that shows coal use in different regions over time. From preparing the data to customizing the chart, this guide gives simple steps to build a clear and effective visualization. You will learn how regions like Asia, Europe, and America have contributed to global coal consumption, making exploring and understanding the data easy. ## Stacked Area Chart The [StackedAreaSeries](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedAreaSeries/StackedAreaSeries.html) is a part of the [SfCartesianChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) widget, designed to visualize how multiple data series combine to form a cumulative total overtime or a specific category. Each series is represented as a filled area, stacked one on top of the other. The [Stacked Area Chart](https://help.syncfusion.com/flutter/cartesian-charts/chart-types/stacked-area-chart) allows us to plot multiple data series on top of each other, effectively showing how individual components contribute to a cumulative total. Each area’s height represents its value relative to the entire chart, making it easy to compare different series contributions at any time. The series also supports customizing its elements like colors, gradients, and borders, allowing you to customize the visual appearance based on your needs. The interactive elements, such as tooltips and trackballs, enhance the user’s ability to explore the data dynamically. ### Key reasons to use a Stacked Area Chart - **Visualizing trends over time:** Helps track how different categories contribute to the overall trend over a period. - **Effective for part-to-whole relationships:** Illustrates how individual components stack up to form a cumulative value. - **Comparing proportions:** Shows the relative contribution of each category to a total while maintaining the visibility of the whole dataset. - **Better for large data sets:** When multiple categories need to be analyzed together rather than separately. - **Easy identification of growth patterns:** Highlights increasing or decreasing trends across multiple categories. ### Use cases of Stacked Area Charts - **Financial analysis:** Tracking revenue, expenses, and profit contributions over time. - **Website analytics:** Monitoring traffic sources (organic, direct, paid, referral) over time. - **Market share analysis:** Comparing different company shares within the industry. - **Energy consumption:** Displaying electricity consumption from different sources (solar, wind, fossil fuels). - **Demographic analysis:** Visualizing population distribution by age groups across years. - **Sales performance:** Showing product category-wise contribution to total sales. Let’s use the Flutter Stacked Area Chart to visualize the data on coal consumption worldwide! We’ll add an image with overlay colors and annotations, as shown in the following image. ![Visualizing the coal consumption data in various regions using Flutter Stacked Area Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2025/03/image001-2.png) ### Enhancing StackedAreaSeries with image overlays The **StackedAreaSeries** effectively visualizes coal consumption trends over time, illustrating how different regions contribute to total usage. Layering the data highlights each region’s share while emphasizing overall growth. To enhance visual appeal, images are overlaid on each series using the [onCreateRenderer](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onCreateRenderer.html) property in the **SfCartesianChart** widget, ensuring a clear and engaging chart by extending the [StackedAreaSeriesRenderer](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedAreaSeriesRenderer-class.html) . Images are applied as texture fills using image shaders in the [onPaint](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSegment/onPaint.html) method of the [StackedAreaSegment](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedAreaSegment-class.html) . Additionally, an overlay color blends the images smoothly with the background, creating a visually distinct representation of global coal consumption. - **onCreateRenderer:** Defines a renderer for the series. - **StackedAreaSeriesRenderer:** Creates the renderer for StackedAreaSeries. - **StackedAreaSegment:** Handles the painting of each segment, allowing image shaders and textures. Additionally, annotations help us to add additional details or visuals to charts, making them more informative and visually appealing. In **SfCartesianChart,** you can use the [annotations](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/annotations.html) property to place text, images, or shapes at specific positions on the chart. This is useful for highlighting key data points, adding labels, or providing additional context to the chart’s information. ## Visualizing coal consumption data using Flutter Stacked Area Chart Follow these steps to visualize the global coal consumption trends using the Flutter Stacked Area Chart! ### Step 1: Gathering the data Let’s collect data on global coal consumption (measured in Exajoules) from the [Energy Institute](https://www.energyinst.org/statistical-review) . This dataset includes coal consumption trends across key regions, such as Europe, North America, Asia-Pacific, and the rest of the world, from 1965 to 2023. ### Step 2: Define and populate data to the chart Now, define the data representing coal consumption trends across different regions over the years. This data will be used to plot the chart and visualize trends effectively. Refer to the following code example. ``` class CoalConsumptionData { final String year; final double europe; final double restOfWorld; final double northAmerica; final double asiaPacific; CoalConsumptionData( this.year, this.europe, this.restOfWorld, this.northAmerica, this.asiaPacific ); } ``` To represent global coal consumption trends in Exajoules from 1965 to 2023, we will create a list named **coalConsumptionData**. This list will be used as the data source for the Stacked Area Chart, providing a clear visualization of the trends over the years. Refer to the following code example. ``` late List coalConsumptionData; @override void initState() { coalConsumptionData = [ CoalConsumptionData('1965', 10, 14, 12, 22), CoalConsumptionData('1966', 11, 14, 13, 21), CoalConsumptionData('1967', 10, 15, 13, 20), CoalConsumptionData('1968', 10, 14, 13, 21), CoalConsumptionData('1969', 12, 15, 13, 21), CoalConsumptionData('1970', 13, 15, 13, 21), CoalConsumptionData('1971', 14, 15, 12, 20), // More data... ]; super.initState(); } ``` ### Step 3: Configuring the Flutter Stacked Area Chart The **SfCartesianChart** is configured with a [CategoryAxis](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CategoryAxis-class.html) as the [primaryXAxis](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/primaryXAxis.html) and a [NumericAxis](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis-class.html) as the [primaryYAxis](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/primaryYAxis.html) to display coal consumption data over time. The X-axis represents years, while the Y-axis measures coal consumption in exajoules. Multiple **StackedAreaSeries** are used to visualize data for different regions, including Asia-Pacific, the rest of the world, North America, and Europe. This setup clearly represents coal consumption trends across different regions over the years. Refer to the following code example. ``` SfCartesianChart( primaryXAxis: _createCategoryAxis(), primaryYAxis: _createNumericAxis(), series: _buildStackedAreaSeries(), ); List> _buildStackedAreaSeries() { final List regionDataMappers = [ (CoalConsumptionData data, int index) => data.asiaPacific, (CoalConsumptionData data, int index) => data.restOfWorld, (CoalConsumptionData data, int index) => data.northAmerica, (CoalConsumptionData data, int index) => data.europe, ]; return List.generate(4, (index) { return StackedAreaSeries( dataSource: coalConsumptionData, xValueMapper: (CoalConsumptionData data, int index) => data.year, yValueMapper: regionDataMappers[index], ..... ); }); } ``` ### Step 4: Configure axes and disable gridline appearance The [CategoryAxis](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CategoryAxis-class.html) (X-axis) represents years with an [interval](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/interval.html) of 3, ensuring labels appear every third year for better readability. It is titled **Years**, and labels are aligned with axis ticks using the [labelPlacement](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CategoryAxis/labelPlacement.html) property set to **onTicks.** Gridlines are disabled using the [majorGridLines](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/majorGridLines.html) by setting the width to 0, reducing visual clutter. The Y-axis [labelPlacement](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CategoryAxis/labelPlacement.html) property represents coal consumption in **Exajoules** with an [interval](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/interval.html) of 20, providing evenly spaced tick marks. It is titled **Exajoules** for clarity. Like the X-axis, major gridlines on the Y-axis are also disabled by setting the [majorGridLines](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/majorGridLines.html) property as 0, creating a clean and uncluttered chart layout. The [axisLabelFormatter](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/axisLabelFormatter.html) function is used to customize the chart axis labels dynamically. It displays the years that are divisible by 10 (e.g., 1970, 1980) and shortens others to their last two digits (e.g., ’75’ for 1975), except for the first (1965) and last (2022) years. Refer to the following code example. ``` SfCartesianChart( primaryXAxis: _createCategoryAxis(), primaryYAxis: _createNumericAxis(), ..... ); CategoryAxis _createCategoryAxis() { return CategoryAxis( interval: 3, title: const AxisTitle( text: 'Years', textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), ), labelPlacement: LabelPlacement.onTicks, majorGridLines: const MajorGridLines(width: 0), axisLabelFormatter: (AxisLabelRenderDetails details) { // Extract year and format final yearIndex = details.value.toInt(); // Get the index final coalData = coalConsumptionData; final year = coalData[yearIndex].year; // Map the index to the year // Year is divisible by 10 final isDivisibleBy10 = int.tryParse(year) != null && int.parse(year) % 10 == 0; return ChartAxisLabel( isDivisibleBy10 ? year : ((year == '1965' || year == '2022') ? year : year.substring(year.length - 2)), details.textStyle, ); }, ); } NumericAxis _createNumericAxis() { return NumericAxis( interval: 20, majorGridLines: const MajorGridLines(width: 0), title: const AxisTitle( text: 'Exajoules', textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), ), ); } ``` ### Step 5: Create and configure the Stacked Area series renderer The [onCreateRenderer](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onCreateRenderer.html) property in the **SfCartesianChart** widget allows us to define a unique renderer for a series. This means that instead of using the default rendering behavior, we can modify how the [StackedAreaSeries](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedAreaSeries/StackedAreaSeries.html) should be drawn by implementing a specialized renderer. #### How does it work? 1. We define an extend renderer class (**StackedAreaRendererExtension**) that extends the default ** StackedAreaSeriesRenderer.** 2. The renderer creates an extended segment (**StackedAreaSegmentExtension**), which modifies how the series is painted. 3. The **onCreateRenderer** property is used in the ** StackedAreaSeries** to replace the default renderer with our modified renderer. Refer to the following code example. ``` SfCartesianChart( ..... series: StackedAreaSeries( ..... onCreateRenderer: (ChartSeries series) => StackedAreaRendererExtension(seriesStackedAreaSeries), ), ); ``` #### Define StackedAreaRendererExtension The **StackedAreaRendererExtension** class extends [StackedAreaSeriesRenderer](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedAreaSeriesRenderer-class.html) . It keeps track of the **seriesIndex** to know which series it belongs to and makes sure multiple series stack correctly. Now, the **StackedAreaRendererExtension** class overrides the [createSegment()](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AreaSeriesRenderer/createSegment.html) method to return a **StackedAreaSegmentExtension**. Then, the ** StackedAreaSegmentExtension**handles the actual drawing, including adding textures and overlay colors and ensuring the segments are stacked in the right order for a clear and visually appealing look. The ** bottomBoundary** property stores the bottom boundary of the previous segment. Refer to the following code example. ``` class StackedAreaRendererExtension extends StackedAreaSeriesRenderer { static final Map> bottomBoundary = {}; StackedAreaRendererExtension(StackedAreaSeries series) : super(); @override StackedAreaSegment createSegment() { return StackedAreaSegmentExtension(); } } ``` #### Enhancing the Stacked Area segment In our demo, the **StackedAreaSegmentExtension** class extends [StackedAreaSegment](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedAreaSegment-class.html) . The **StackedAreaSegmentExtension** class is used to customize how each segment in a stacked area chart should be drawn by adding background images and overlay colors. It assigns a unique image and color to each segment based on the ** seriesIndex.** To optimize the performance, the **_loadImageForSeries()** method is used to load images from assets and store them in the **_loadedImages** property, preventing redundant loading. This ensures each segment has a distinct visual style without affecting performance. The [onPaint](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AreaSegment/onPaint.html) method handles the drawing process by first generating the segment shape with the **_generateSegmentPath()** method, and then applying an image background using the ** ImageShader.** A semi-transparent overlay color is added for better visibility, and a black border is drawn for clear separation. The **_buildBottomBoundaryPoints()** method saves the bottom boundary points, ensuring the correct stacking of segments. This approach enhances the chart’s clarity and visual appeal, making data representation more engaging. Refer to the following code example. ``` class StackedAreaSegmentExtension extends StackedAreaSegment { ui.Image? backgroundImage; static final Map _loadedImages = {}; …. Future _loadImageForSeries() async { if (_loadedImages.containsKey(series.index)) { backgroundImage = _loadedImages[series.index]; } else { try { final ByteData data = await rootBundle.load(images[series.index]); final codec = await ui.instantiateImageCodec(data.buffer.asUint8List()); final frame = await codec.getNextFrame(); backgroundImage = frame.image; _loadedImages[series.index] = backgroundImage!; } catch (e) { debugPrint("Image loading error: $e"); } } } @override void onPaint(Canvas canvas) { if (points.isEmpty) return; // Ensure the image is loaded before painting if (backgroundImage == null) { _loadImageForSeries(); return; } Path segmentPath = _generateSegmentPath(canvas); _buildBottomBoundaryPoints(); // Paint for the image background Paint fillPaint = Paint() ..color = Colors.black.withValues(alpha: 0.4) ..blendMode = BlendMode.darken ..shader = ImageShader( backgroundImage!, TileMode.repeated, TileMode.repeated, Matrix4.identity().storage, ); canvas.drawPath(segmentPath, fillPaint); } Path _generateSegmentPath(Canvas canvas) { Path path = Path()..moveTo(points.first.dx, points.first.dy); for (int i = 1; i < points.length; i++) { path.lineTo(points[i].dx, points[i].dy); } List bottomPoints = StackedAreaRendererExtension.bottomBoundary[series.index - 1] ?? []; if (series.index == 0 || bottomPoints.isEmpty) { double chartBottomY = canvas.getLocalClipBounds().bottom; for (int i = points.length - 1; i >= 0; i--) { path.lineTo(points[i].dx, chartBottomY); } } else { for (int i = points.length - 1; i >= 0; i--) { path.lineTo(bottomPoints[i].dx, bottomPoints[i].dy); } } return path..close(); } void _buildBottomBoundaryPoints() { StackedAreaRendererExtension.bottomBoundary[series.index] = List.from(points); } } ``` Additionally, the required coal images should be added to the assets in your **pubspec.yaml** file to ensure proper loading and display of each image in the chart. This approach makes the chart visually appealing. Refer to the following example code. ``` flutter: assets: - assets/coal1.jpg - assets/coal2.jpg - assets/coal3.jpg ``` ### Step 6: Adding annotations to the chart Annotations allow additional information or visual elements to be placed on the chart using the [annotations](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/annotations.html) property, which accepts a list of [CartesianChartAnnotation](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation-class.html) objects. The **CartesianChartAnnotation** method takes a widget, an [x](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/x.html) value, and a [y](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/y.html) value to position the annotation at specific coordinates by setting [coordinateUnit](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html) to point. Additionally, the [SfCircularChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) widget with a [DoughnutSeries](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DoughnutSeries-class.html) is used as an annotation to provide a visual representation of data within the [Cartesian Chart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) . These annotations are strategically placed using x and y values, ensuring a clear and structured way to visualize coal consumption data. Refer to the following code example. ``` SfCartesianChart( ..... annotations: _createAnnotations(), ); // Helper function to create CartesianChartAnnotation CartesianChartAnnotation _createAnnotation(Widget widget, String x, double y) { return CartesianChartAnnotation( widget: widget, x: x, y: y, coordinateUnit: CoordinateUnit.point, ); } // Helper function to create a DecoratedBox with text Widget createDecoratedBox(String text, Color borderColor, Color color) { return Center( child: DecoratedBox( ..... ), ); } // Function to create a list of annotations List _createAnnotations() { TextStyle textStyle = TextStyle(fontSize: 18, color: Colors.white); return[ _createAnnotation( SfCircularChart( series:[ DoughnutSeries( dataSource: [ ChartData('Example', 40, Colors.black54), ChartData('Example', 25, Colors.red.withOpacity(0.7)), ], xValueMapper: (ChartData data, int index) => data.x, yValueMapper: (ChartData data, int index) => data.y, pointColorMapper: (ChartData data, int index) => data.color, ), ], ), '1969', 156, ), _createAnnotation( Text( "Coal consumption across \nthe world from 1965 to 2023.", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), ), '1976', 156, ), // Data label annotations on series. _createAnnotation(Text("Europe", style: textStyle), '1986', 10), _createAnnotation(Text("Rest Of World", style: textStyle), '1995', 24), _createAnnotation(Text("North America", style: textStyle), '2002', 40), _createAnnotation(Text("Asia Pacific", style: textStyle), '2010', 83), // Data label annotations at the edge of the series. _createAnnotation( createDecoratedBox('$asiaPacific', Colors.red, Colors.red.shade100), '2022', 167, ), _createAnnotation( createDecoratedBox('$northAmerica', Colors.blue, Colors.blue.shade100), '2022', 36, ), _createAnnotation( createDecoratedBox('$restOfWorld', Colors.green, Colors.green.shade100), '2022', 24, ), _createAnnotation( createDecoratedBox('$europe', Colors.yellow, Colors.yellow.shade100), '2022', 14, ), ]; } ``` Refer to the following image. ![Visualizing the coal consumption in various regions using Flutter Stacked Area Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2025/03/image002-2.png) Visualizing the coal consumption in various regions using Flutter Stacked Area Chart ## GitHub reference For more details, refer to the [visualizing global coal consumption trends using the Flutter Stacked Area Chart](https://github.com/SyncfusionExamples/flutter_stacked_area_chart_to_visualizing_global_coal_consumption) . ## Conclusion Thank you for reading! This blog explains how to visualize the global coal consumption trend using the Syncfusion [Flutter Stacked Area Chart](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-area-chart) . We hope these steps help you easily create a similar visualization and enhance your data representation. The existing customers can download the new version of Essential Studio® on the [License and Downloads page](https://www.syncfusion.com/account/downloads) . If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out our incredible features. For questions, you can contact us through our [support forums](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/) . We are always happy to assist you! ## Related Blogs [AI-Powered Flutter Calendar for Effortless Project Scheduling and Reviews](https://www.syncfusion.com/blogs/post/ai-powered-smart-flutter-calendar) [Create an Interactive Heat Map Using Flutter Charts](https://www.syncfusion.com/blogs/post/build-heat-map-using-flutter-charts) [Customize Flutter DataGrid for Enhanced Data Visualization](https://www.syncfusion.com/blogs/post/customize-flutter-data-grid-widget) [S&P 500 Returns After Rate Cuts: Visualized Using a Flutter Heatmap](https://www.syncfusion.com/blogs/post/view-sp500-return-in-flutter-heatmap)