--- title: "Create a Flutter 3D Column Chart to Showcase the Top 6 Renewable Energy-Consuming Countries" published_at: "2024-12-26T11:40:54+00:00" modified_at: "2026-02-10T08:25:14+00:00" url: "https://www.syncfusion.com/blogs/post/flutter-3d-column-chart-renewable-energy" excerpt: "Let's visualize the top 6 renewable energy-consuming countries using the Syncfusion Flutter 3D Column Chart." taxonomy_category: - "Chart" - "Chart of the week" - "Desktop" - "Flutter" - "Mobile" - "Web" taxonomy_post_tag: - "Chart" - "Data Visualization" - "desktop" - "Flutter" - "Mobile" - "Web Development" --- [Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week) # Create a Flutter 3D Column Chart to Showcase the Top 6 Renewable Energy-Consuming Countries [Praveen Balu](https://www.syncfusion.com/blogs/author/praveen-balu) ![Create a Flutter 3D Column Chart to Showcase the Top 6 Renewable Energy-Consuming Countries](https://www.syncfusion.com/blogs/wp-content/uploads/2024/12/Create-a-Flutter-3D-Column-Chart-to-Showcase-the-Top-6-Renewable-Energy-Consuming-Countries.jpg) **TL;DR:** Explore how to create a visually striking Flutter 3D Column Chart to showcase renewable energy consumption by the top 6 countries. Learn to build, customize, and enhance interactivity with custom data labels, 3D effects, and a tailored series renderer for unique visuals. Welcome to Our **Chart of the Week** Blog Series! In this blog, we’ll walk you through how to build a visually engaging Flutter 3D Column Chart using the [Syncfusion Flutter Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts) library. We’ll showcase the top 6 renewable energy-consuming countries, with custom data labels and tooltips for enhanced interactivity. ## Column Chart A [Column Chart](https://help.syncfusion.com/flutter/cartesian-charts/chart-types/column-chart) is an effective method of representing categorical data using vertical bars. It is ideal for comparing data across different groups, in this case, the renewable energy consumption by various countries. ## 3D Column series renderer The [onCreateRenderer](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onCreateRenderer.html) callback allows you to assign a custom 3D series renderer to render unique shapes for each segment by creating a custom renderer class, such as **_CustomColumn3DSeriesRenderer,** which extends the [ColumnSeriesRenderer](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedColumnSeriesRenderer-class.html) class. In this custom renderer, the key methods include: - [createSegment](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeriesRenderer/createSegment.html) for defining segments based on data, - [customizeSegment](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeriesRenderer/customizeSegment.html) for adjusting the appearance of each segment, and - [onPaint](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeriesRenderer/onPaint.html) for managing the drawing of the series. The custom series allows you to create unique visual effects for your chart by extending the default chart series behavior. In this tutorial, we’ll focus on creating a 3D effect for both the column track and energy-consuming columns. By using a custom series renderer, you can define a custom painter to render 3D elements that add depth and interactivity to your chart. Let’s visualize the data of the top 6 renewable energy-consuming countries using the Syncfusion Flutter Column Chart! Refer to the following image. ![Visualizing the top 6 renewable energy consuming countries using the Flutter 3D Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/12/Visualizing-the-data-of-the-top-6-renewable-energy-consumption-by-various-countries-using-the-Flutter-Column-Chart.gif) Let’s get started! ## Step 1: Gather the data First, let’s collect data on the [top 6 renewable energy-consuming countries](https://energydigital.com/top10/top-10-countries-using-renewable-energy) . ## Step 2: Initialize the data for the chart Now, create an energy data model that represents the country’s name and energy consumed in percentages. ``` class EnergyData { EnergyData(this.country, this.energyConsumedPercent); final String country; final double energyConsumedPercent; } ``` Next, a list will be initialized to hold the country’s energy consumption data, adding color data for the oval shape at the top and energy consumed data for each country. ``` late List _energyConsumedData; late Map _cylinderColors; late Map _topOvalColors; void initState() { _energyConsumedData = [ EnergyData('Iceland', 86.87), EnergyData('Norway', 71.56), EnergyData('Sweden', 50.92), EnergyData('Brazil', 46.22), EnergyData('New Zealand', 40.22), EnergyData('Denmark', 39.25), ]; _cylinderColors = { 'Iceland': const Color.fromARGB(255, 178, 52, 43), 'Norway': const Color.fromARGB(255, 125, 31, 142), 'Sweden': const Color.fromARGB(255, 8, 133, 120), 'Brazil': const Color.fromARGB(255, 25, 108, 176), 'New Zealand': const Color.fromARGB(255, 92, 63, 53), 'Denmark': const Color.fromARGB(255, 139, 126, 4) }; _topOvalColors = { 'Iceland': const Color.fromARGB(255, 210, 83, 74), 'Norway': const Color.fromARGB(255, 145, 56, 160), 'Sweden': const Color.fromARGB(255, 47, 150, 140), 'Brazil': const Color.fromARGB(255, 59, 128, 185), 'New Zealand': const Color.fromARGB(255, 117, 80, 67), 'Denmark': const Color.fromARGB(255, 179, 163, 15) }; super.initState(); } ``` ## Step 3: Building a Flutter Column Chart To render a Flutter Column Chart with a track, a single [ColumnSeries](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries-class.html) is used to visualize energy consumption data alongside a visible background track. The X-axis is set to [CategoryAxis](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CategoryAxis-class.html) , representing categorical data like country names, while the Y-axis is set to [NumericAxis](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis-class.html) for numeric values to display the energy consumption in percentage. The **ColumnSeries** is configured to display a track by setting the [isTrackVisible](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries/isTrackVisible.html) property to **true.** The track serves as the background layer, providing visual separation and context for the actual data columns. ### Create the energy-consumed data series This series overlays the energy-consumption data onto the track. The [yValueMapper](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/XyDataSeries/yValueMapper.html) is used to map the percentage of energy consumed to the Y-axis, while the [pointColorMapper](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/pointColorMapper.html) dynamically assigns colors to the columns based on the country name. This ensures each data point is visually distinct and easy to interpret. Refer to the following code example. ``` @override Widget build(BuildContext context) { return Scaffold( body: SfCartesianChart( primaryXAxis: const CategoryAxis(), series: >[ ColumnSeries( dataSource: _energyConsumedData, xValueMapper: (EnergyData data, index) => data.country, yValueMapper: (EnergyData data, index) => data.energyConsumedPercent, pointColorMapper: (EnergyData data, index) => _cylinderColors[data.country], isTrackVisible: true, trackColor: const Color.fromARGB(255, 191, 188, 188), ), ], ), ); } ``` Refer to the following image. ![Building a Flutter Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/12/Building-a-Flutter-column-chart.png) Creating a Flutter Column Chart ## Step 4: Customize the axes appearance For the [primaryXAxis](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/primaryXAxis.html) , we’ll use a [CategoryAxis](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CategoryAxis-class.html) to represent countries. We’ll customize the appearance by removing the [majorGridLines](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/majorGridLines.html) , [majorTickLines](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/majorTickLines.html) , and [axisLine](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLine-class.html) . We’ll also customize the [labelPosition](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelPosition.html) to display it inside the chart. For the [primaryYAxis](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/primaryYAxis.html) , we will use a [NumericAxis](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis-class.html) to represent the energy consumed values in a percentage format. We’ll set the [isVisible](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/isVisible.html) property to **false** to hide the Y-axis labels. Additionally, we’ll adjust the [plotOffsetStart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/plotOffsetStart.html) and [plotOffsetEnd](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/plotOffsetEnd.html) values to 50 to add padding at the start and end of the plot area, enhancing the chart’s visual appeal. Additionally, you can customize the axis labels using the [axisLabelFormatter](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/axisLabelFormatter.html) callback to utilize the [ChartAxisLabel](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxisLabel-class.html) class to adjust the [textStyle](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/textStyle.html) of the axis labels according to your needs. Then, set the [plotAreaBorderWidth](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/plotAreaBorderWidth.html) to 0 to remove the border around the series. Refer to the following code example. ``` plotAreaBorderWidth: 0, primaryXAxis: CategoryAxis( majorGridLines: const MajorGridLines(width: 0), majorTickLines: const MajorTickLines(width: 0), axisLine: const AxisLine(width: 0), axisLabelFormatter: (axisLabelRenderArgs) { TextStyle textStyle = Theme.of(context) .textTheme .titleSmall! .copyWith(color: _cylinderColors[axisLabelRenderArgs.text]); return ChartAxisLabel(axisLabelRenderArgs.text, textStyle); }, labelPosition: ChartDataLabelPosition.inside, ), primaryYAxis: const NumericAxis( isVisible: false, plotOffsetStart: 50, plotOffsetEnd: 50, ), ``` Refer to the following image. ![Customizing the axes appearance in Flutter Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/12/Customizing-the-axes-appearance.png) Customizing the axes appearance in Flutter Column Chart ## Step 5: Adding chart title Let’s use the [ChartTitle](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) widget to add and customize the chart title. The title is aligned to the center using the**alignment** property, and we’ve set the [ChartAlignment](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html) value as the center. The [text](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property is used to set the chart’s title. ``` ChartTitle( alignment: ChartAlignment.center, text: 'Percentage of Total Energy Consumption from Renewable Sources in a Country'), ``` Refer to the following image. ![Adding title to the Flutter Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/12/Adding-chart-title.png) Adding title to the Flutter Column Chart ## Step 6: Creating a custom 3D series renderer The [onCreateRenderer](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onCreateRenderer.html) callback enables the creation of a custom 3D series renderer, allowing you to render unique shapes for each segment. To achieve this, we need to define a custom renderer class, such as **_CustomColumnSeriesRenderer,** that extends the [ColumnSeriesRenderer](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeriesRenderer-class.html) class. In this custom renderer, the key methods include, - [createSegment](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeriesRenderer/createSegment.html) : Creates segments for the series based on data points. - [onPaint](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSegment/onPaint.html) : Paints the series according to customizations, including the previously customized segments. ``` ColumnSeries( ... onCreateRenderer: (ChartSeries series) { return _CustomColumn3DSeriesRenderer(); }, ), ``` ### Custom 3D series renderer for Column Chart The **_CustomColumn3DSeriesRenderer** class extends the [ColumnSeriesRenderer](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeriesRenderer-class.html) to create a custom 3D visualization for column series based on the **EnergyData** model. This renderer uses a ** topOvalColors** map to specify the colors for the top ovals of the 3D columns based on the country names. The [createSegment](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeriesRenderer/createSegment.html) method is overridden to return a custom column segment, **_CustomColumn3DSegment,** which handles drawing 3D effects for each column. The **_CustomColumn3DSegment** class extends [ColumnSegment](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSegment-class.html) and implements the [onPaint](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSegment/onPaint.html) method to add a custom 3D segment. Within the [onPaint](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSegment/onPaint.html) method: - The **countryName** is determined based on the current segment index, mapping the X-values to their raw data. - The **trackerTop, bottomOval,** and ** topOval** rectangles are calculated using the ** ovalRect** helper method, which creates an oval based on the Y-coordinate and radius. - The painting logic includes: - **trackerTopOval** – Drawing a light gray oval at the top of the tracker for the 3D shadow effect. - **bottomOval** – Painting the bottom oval using the fill color at the bottom of each segment. - **animatedTopOval** – Painting the top oval using the color defined in the ** topOvalColors**corresponding to the country name. The animation is applied to the top oval by calculating its position dynamically based on the ** animationFactor.** The ** segmentRect’s** height is interpolated to animate the oval’s position smoothly as the column grows. The **ovalRect** helper method generates a rectangular bounding box for the ovals. It takes the center Y-coordinate and calculates the dimensions using a fixed radius of 15. The resulting 3D series effect gives the columns a visually distinct appearance and makes the data representation more engaging and intuitive. Refer to the following code example. ``` class _CustomColumn3DSeriesRenderer extends ColumnSeriesRenderer { _CustomColumn3DSeriesRenderer(this.topOvalColors); final Map topOvalColors; @override ColumnSegment createSegment() { return _CustomColumn3DSegment(topOvalColors); } } class _CustomColumn3DSegment extends ColumnSegment { _CustomColumn3DSegment(this.topOvalColors); final Map topOvalColors; @override void onPaint(Canvas canvas) { final String countryName = series.xRawValues[currentSegmentIndex]!; final double trackerTop = series.pointToPixelY(0, 100); final Rect trackerTopOval = ovalRect(trackerTop); final Rect bottomOval = ovalRect(segmentRect!.bottom); final Rect animatedTopOval = ovalRect(segmentRect!.bottom - ((segmentRect!.bottom - segmentRect!.top) * animationFactor)); super.onPaint(canvas); canvas.drawOval(trackerTopOval, Paint()..color = const Color.fromARGB(255, 204, 201, 201)); canvas.drawOval(bottomOval, Paint()..color = fillPaint.color); canvas.drawOval( animatedTopOval, Paint()..color = topOvalColors[countryName]!); } Rect ovalRect(double ovalCenterY) { const double ovalRadius = 15; return Rect.fromLTRB(segmentRect!.left, ovalCenterY - ovalRadius, segmentRect!.right, ovalCenterY + ovalRadius); } } ``` Refer to the following image. ![Creating custom 3D series renderer for the Flutter Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/12/Creating-custom-3D-series-renderer.png) Creating a custom 3D series renderer for the Flutter Column Chart ## Step 7: Customizing the data label The [onDataLabelRender](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onDataLabelRender.html) callback is used to adjust the appearance of data labels. The [text](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/text.html) property is updated to include a percentage symbol alongside the displayed value. ``` onDataLabelRender: (DataLabelRenderArgs dataLabelArgs) { dataLabelArgs.text = '${dataLabelArgs.text}%'; }, ``` ## Step 8: Adding and customizing tooltip Let’s enable the [TooltipBehavior](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) to display the additional data when hovering over data points. The [onTooltipRender](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onTooltipRender.html) callback customizes the tooltip text by splitting it into a formatted header and value. The text is split by ‘ : ‘, assigning the first part as the header [Country name] and the second part as the text [energy consumed percent] on the tooltip. ``` tooltipBehavior: TooltipBehavior(enable: true), onTooltipRender: (TooltipArgs tooltipArgs) { List tooltipText = tooltipArgs.text!.split(' : '); tooltipArgs.header = tooltipText[0]; tooltipArgs.text = '${tooltipText[1]}%'; }, ``` Refer to the following image. ![Adding tooltips to the Flutter Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/12/Adding-tooltip-behavior-customization.png) Adding tooltips to the Flutter Column Chart ## Step 9: Customizing data label settings and animation controller in the series Let’s show the energy consumed data on each **ColumnSeries** and position them in the middle of each segment by setting the [labelAlignment](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) property as **middle.** Additionally, the [animationDuration](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDuration.html) property is set to **2000 milliseconds**, which animates the column series smoothly over 2 seconds when the chart is rendered. Refer to the following code example. ``` series: >[ ColumnSeries( ... dataLabelSettings: const DataLabelSettings( isVisible: true, labelAlignment: ChartDataLabelAlignment.middle), animationDuration: 2000, ), ], ``` Refer to the following image. ![Visualizing the top 6 renewable energy consuming countries using the Flutter 3D Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/12/Visualizing-the-data-of-the-top-6-renewable-energy-consumption-by-various-countries-using-the-Flutter-Column-Chart.gif) Visualizing the top 6 renewable energy-consuming countries using the Flutter 3D Column Chart ## GitHub reference For more details, refer to the [Flutter 3D Column Chart to visualize the top 6 renewable energy consuming countries GitHub demo](https://github.com/SyncfusionExamples/flutter_column_chart_renewable_energy_consumers) . ## Conclusion Thanks for reading! In this blog, we’ve seen how to visualize the top 6 renewable energy-consuming countries’ data by creating a 3D Column Chart using the Syncfusion [Flutter Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts) . We hope you find the outlined steps helpful in achieving similar results. If you’re an existing customer, you can download the latest version of Essential Studio® from the [license and downloads page](https://www.syncfusion.com/account/downloads) . For those new to Syncfusion, try our 30-day [free trial](https://www.syncfusion.com/downloads) to explore all our features. For queries, you can contact us through our [support forum](https://www.syncfusion.com/forums) , [feedback portal](https://www.syncfusion.com/feedback) , or [support portal](https://support.syncfusion.com/) . As always, we are happy to assist you! ## Related Blogs [Sneak Peek at 2024 Volume 4: Flutter](https://www.syncfusion.com/blogs/post/sneak-peek-at-2024-volume-4-flutter) [Easily Manage Multiple PDFs Simultaneously Using Flutter PDF Viewer](https://www.syncfusion.com/blogs/post/multi-tabbed-pdf-viewer-in-flutter) [Syncfusion Essential Studio® 2024 Volume 4 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2024-volume-4) [Create a Flutter Column Chart to Visualize the World’s Largest Wind Power Producers](https://www.syncfusion.com/blogs/post/flutter-column-chart-wind-power-producer)