--- title: "Create a Flutter Semi-Doughnut Chart to Visualize Transport Emissions per Kilometer Traveled" published_at: "2024-10-30T14:45:29+00:00" modified_at: "2026-02-10T13:06:29+00:00" url: "https://www.syncfusion.com/blogs/post/flutter-semi-doughnut-chart-emissions" excerpt: "This blog explains how to visualize vehicle emissions data using the Flutter semi-Doughnut Chart with code examples." taxonomy_category: - "Chart" - "Chart of the week" - "Desktop" - "Flutter" - "Mobile" - "Web" taxonomy_post_tag: - "Charts" - "Data Visualization" - "desktop" - "Flutter" - "Mobile" - "Web Development" --- [Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week) # Create a Flutter Semi-Doughnut Chart to Visualize Transport Emissions per Kilometer Traveled [Aswini Suresh Reddy](https://www.syncfusion.com/blogs/author/aswini-suresh-reddy) ![Create a Flutter Semi-Doughnut Chart to Visualize Transport Emissions per Kilometer Traveled](https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/Create-a-Flutter-Semi-Doughnut-Chart-to-Visualize-Transport-Emissions-per-Kilometer-Traveled.png) **TL;DR:** Let’s visualize transport emissions using a Flutter Semi-Doughnut Chart with Syncfusion. First, gather and organize your emission data. Next, create the chart, customize its colors, and adjust the angles to form a semi-doughnut shape. Finally, enhance clarity by adding data labels with icons and incorporating annotations and connector lines for better insights. Welcome to the **Chart of the Week** blog series! [Doughnut charts](https://en.wikipedia.org/wiki/Pie_chart#Doughnut_chart) are widely used to display data in an easy-to-understand and visually appealing manner. They help users quickly grasp relationships between different categories in a dataset. They are particularly effective for use cases like survey results, sales distributions, product compositions, market shares, and budget allocations. This blog will demonstrate how to visualize vehicle emissions per kilometer traveled using the [Syncfusion Flutter Doughnut Chart](https://help.syncfusion.com/flutter/circular-charts/chart-types/doughnut-chart) . We’ll customize the Doughnut Chart by adjusting its angle, radius, annotation, and data label for better visualization and create a semi-doughnut chart. ## Circular Charts Syncfusion [Flutter Circular Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types) offer a straightforward way to visualize complex data. As the name suggests, circular charts represent a circular format, making information visually engaging and suitable for various apps like business analytics, scientific research, and decision-making. ### Types of Circular Charts The Syncfusion Flutter Circular Charts library features three types of circular chart series: pie series, doughnut series, and radial series. Each serves different data visualization needs, with the [doughnut series](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/doughnut-chart) being a key type that we will focus on in this blog post. ## Doughnut Series The Doughnut series creates a circular chart with a hollow center resembling a doughnut. This hollow space can be used to display additional information, making the chart more informative. In this blog, we will focus on achieving the desired UI using the doughnut series from Syncfusion Flutter Circular Charts. Here are some key properties to enhance our doughnut series: - [DataLabelSettings:](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html) This property customizes data labels to provide detailed information about each data point. - [ConnectorLineSettings](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/connectorLineSettings.html) : This property allows us to customize the connector lines. Using this, we’ll customize the connector line width, color, length, and type. This connector line is rendered when the data label is placed outside the chart. - [Annotation](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/annotations.html) : This feature highlights specific areas of interest in the chart by adding elements such as text labels, shapes, or images. Annotations provide context or additional information, enhancing the interpretation of the chart. The following doughnut chart visually depicts carbon emissions produced by various modes of transport per kilometer traveled.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/Visualizing-a-Flutter-Semi-Doughnut-Chart-for-Visualizing-Transport-Emissions-per-Kilometer-Travelled.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/Visualizing-a-Flutter-Semi-Doughnut-Chart-for-Visualizing-Transport-Emissions-per-Kilometer-Travelled.png) Let’s learn to create a Flutter semi-Doughnut Chart to visualize the vehicle emissions data! ## Step 1: Gather the data First, we need to collect real-time data on carbon emissions produced by [different modes of transport](https://ourworldindata.org/grapher/carbon-footprint-travel-mode?tab=table) per kilometer traveled, including electric cars, national rail, buses, motorbikes, and flights. We then organize this data into a list that specifies each transport mode and its carbon emissions (in grams) per kilometer. This list will serve as the data source for our chart. ## Step 2: Define and load data into the chart Next, we’ll define the **CarbonEmission** class to encapsulate the data for each segment of the doughnut chart. This class will contain the following attributes: - **x:** Represents the label for the segment. - **y:** Holds the corresponding value for the segment. - **Icon:** Displays the icon related to the carbon emissions for different modes of transport on each segment label. - **Color:** Specifies the color of the segment. Refer to the following code example. ``` class CarbonEmission { CarbonEmission(this.x, this.y, this.icon, this.color); final String x; final double y; final IconData icon; final Color color; } ``` The following list returns a collection of **CarbonEmission** objects, each corresponding to a specific segment of the doughnut series: ``` .... [ CarbonEmission( 'Bus', 97, Icons.directions_bus_outlined, const Color(0xff036666)), CarbonEmission('Flight', 246, Icons.flight, const Color(0xff248277)), CarbonEmission( 'Motorbike', 114, Icons.pedal_bike_outlined, const Color(0xff469D89)), CarbonEmission('Electric car', 47, Icons.directions_car_filled_outlined, const Color(0xff67B99A)), CarbonEmission('National rail', 35, Icons.directions_railway_filled_sharp, const Color(0xff88D4AB)), ]; .... ``` ## Step 3: Building the Doughnut Chart Let’s render the doughnut series using the [dataSource](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataSource.html) that defines the dataset for the chart. Each **CarbonEmission** object contains specific values to be displayed. The [xValueMapper](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/xValueMapper.html) and [yValueMapper](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/yValueMapper.html) will map the **x** and ** y** values of the ** CarbonEmission** data. To apply unique colors to each data point in the doughnut series, we’ll use [pointColorMapper](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/pointColorMapper.html) with the color value from **CarbonEmission**. The default ** startAngle** is 0 degrees, and the ** endAngle** is 360 degrees, resulting in a circular chart with a hollow center resembling a doughnut, which looks like the following image. Creating a Doughnut Chart ## Step 4: Building the semi-Doughnut Chart To create a semi-doughnut chart from the doughnut series, we’ll adjust the **startAngle** and ** endAngle** properties. Setting the [startAngle](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/startAngle.html) to 270 degrees and the [endAngle](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/endAngle.html) to 90 degrees will give it a semi-doughnut appearance. These properties allow for flexible customization, enabling us to adjust the visible portion of the doughnut chart to any desired angle, making it suitable for various visualizations. The [radius](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/radius.html) property controls the overall size of the doughnut series, determining how large it appears relative to the parent widget. By default, the doughnut chart occupies **80%** of the available space; this can be adjusted as needed. Here, we set the radius to ** 60%**, reducing the overall size of the doughnut and leaving more space around the chart, which helps to accommodate the other chart elements like [legend](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/legend.html) , title, and more. Additionally, the **strokeColor** and ** strokeWidth** properties can be used to customize the appearance of the semi-doughnut chart’s border. By default, the stroke color is transparent (no visible border), and the stroke width is set to 2.0. In this case, we changed the stroke color to ** white** and increased the stroke width to ** 3.0**. This adjustment helps us to visually separate the segments and make the semi-doughnut chart look better. ``` DoughnutSeries< CarbonEmission, String> _buildDoughnutSeries() {     return DoughnutSeries< CarbonEmission, String>(       radius: '60%',       dataSource: carbonEmission,    xValueMapper: (CarbonEmission data, int index) => data.x,       yValueMapper: (CarbonEmission data, int index) => data.y,       pointColorMapper: (CarbonEmission data, int index) => data.color,       startAngle: 270,       endAngle: 90,                 strokeColor: Colors.white,     strokeWidth: 3,   } ``` Refer to the following image. Creating a semi-Doughnut Chart ## Step 5: Enable the data label The [dataLabelSettings](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html) property in the series is used to provide essential information by showing the value for each segment directly on the semi-doughnut chart. By default, the **isVisible** property is set to false. Enabling this property allows the data labels to appear on the doughnut chart and provides an option to toggle their visibility as needed. Refer to the following code example. ``` .... dataLabelSettings: const DataLabelSettings( .... isVisible: true, .... ), .... ``` Refer to the following image. Displaying data labels in the Flutter semi-Doughnut Chart ## Step 6: Customizing the data label The **dataLabelSettings** customization allows us to control how data labels appear in the Semi-Doughnut, making them more informative and visually appealing. Here, the [builder](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/builder.html) property creates a custom layout for the data labels, adding icons and text for better visualization and readability. We use a [Row](https://api.flutter.dev/flutter/widgets/Row/Row.html) widget to arrange a circular container with an icon and label text. The circular [container](https://api.flutter.dev/flutter/widgets/Container/Container.html) uses the segment’s assigned color, providing a visual representation of the data. The icon inside clearly identifies the data point, while the text makes it more readable. ### Some key customizations #### Circular UI for data labels and label positioning The circular appearance is achieved using a [Container](https://api.flutter.dev/flutter/widgets/Container/Container.html) with [BoxDecoration](https://api.flutter.dev/flutter/painting/BoxDecoration/BoxDecoration.html) . The container’s color is set to the corresponding data segment’s color, making it consistent with the chart. A white border is added around the circular shape, and the Icon is centered within the circle for a clean look. This builder allows for flexible customization, enabling developers to adjust the style according to their desired data label appearance to suit different UI requirements. By default, [labelPosition](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) is set to **ChartDataLabelPosition.inside**. Here, the ** labelPosition** property is set to ** outside,** placing the labels outside the chart segments for better readability. This property can also be used to place labels inside the segments if desired. #### Smart labels By setting [labelIntersectAction](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) to **none,** we ensure that the labels remain visible without getting trimmed or shifted due to overlapping. This differs from the default behavior, in which overlapping labels may shift to avoid overlap. Learn more about [smart labels](https://help.syncfusion.com/flutter/circular-charts/datalabel#smart-labels) . #### Connector line customization The [connectorLineSettings](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/connectorLineSettings.html) property is used to add connector lines that link the labels to their respective segments in the semi-Doughnut Chart. Since the labels are positioned outside, these lines help show the segment corresponds to each label. By default, the connector line is set to **null,** but this ranges from ** 0% to 100%**. The length of the connector line is set to ** 5%**, ensuring a clear connection between the label and the segment. These settings enhance the data labels by making them more informative and visually appealing. ``` .... dataLabelSettings: DataLabelSettings( .... builder: (dynamic data, dynamic point, dynamic series, int pointIndex, int seriesIndex) { return Row( .... children: [ Container( .... decoration: BoxDecoration( color: data.color, shape: BoxShape.circle, border: Border.all(color: Colors.white,), ), child: Icon( data.icon, ), ), const SizedBox(width: 8), Text( data.x, ), ], ); }, labelPosition: ChartDataLabelPosition.outside, labelIntersectAction: LabelIntersectAction.none, connectorLineSettings: const ConnectorLineSettings(length: '5%'), ), .... ``` After enabling and customizing the data label, the UI will appear as shown in the following image. Customizing the data labels in Flutter semi-Doughnut Chart ### Step 7: Adding annotations for chart visualizations By default, [annotations](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/annotations.html) in the Flutter Doughnut Chart are placed at the center. Like this, we’ll add annotations to display additional information in the center of the semi-Doughnut Chart. Here, we demonstrate how to add text inside the semi-Doughnut Chart to show the label of the largest segment in the chart and a brief description of the data being visualized. We’ll use the [CircularChartAnnotation](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation-class.html) class to create an annotation in the chart’s center. The CircularChartAnnotation class allows you to customize and position the annotation using [radius](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation/radius.html) and [angle](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation/angle.html) properties. Additionally, the [width](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation/width.html) and [height](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation/height.html) properties can be used to adjust the size of the annotation, ensuring that it fits with the overall design of the chart. This flexibility allows for enhanced customization, making it easy to position and style the annotation to match the desired appearance. Additionally, the annotation will display the segment’s label with the largest y-value, allowing for easy identification of the largest data point compared to the other segments. ``` .... String largestSectorLabel = _buildLargestSectorLabel(); String _buildLargestSectorLabel() { final largestSector = carbonEmission.reduce( (current, next) => current.y > next.y ? current : next, ); return largestSector.x; } .... ``` Refer to the following code example to pass values for building annotation. ``` CircularChartAnnotation _buildCenterTextAnnotation() { return CircularChartAnnotation( widget: Column ( mainAxisSize: MainAxisSize.min, children: [ Text ( _largestSectorLabel.toUpperCase(), ), Text ( 'Carbon footprint of travel per kilometer', textAlign: TextAlign.center, ), ], ), ); } } ``` After executing the above steps, the output will look like the following image. Visualizing vehicle emissions per kilometer traveled using the Flutter semi-Doughnut Chart ## GitHub reference For more details, refer to the GitHub demo for [creating a Flutter semi-Doughnut Chart for carbon impression of travel per kilometer](https://github.com/SyncfusionExamples/how-to-create-flutter-semi-doughnut-chart-for-carbon-emissions-per-kilometer) . ## Conclusion Thank you for reading this blog! We explored how to create a Flutter semi-Doughnut Chart to visually represent the carbon emissions produced by various modes of transport per kilometer travel. This guide aims to help you understand the importance of effective data visualization. If you’re an existing customer, you can download the latest version of Essential Studio® from the [License and Downloads](https://www.syncfusion.com/account/downloads) page. 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) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/flutter) . We’re always happy to help you! ## Related Blogs [Easily Draw Custom Shapes in Flutter Cartesian Charts](https://www.syncfusion.com/blogs/post/draw-custom-shapes-in-flutter-charts) [Create a Flutter Column Chart to View the Top 15 Water-Consuming Countries in the World](https://www.syncfusion.com/blogs/post/flutter-column-chart-for-water-consumption) [Introducing the New Flutter Chat Widget](https://www.syncfusion.com/blogs/post/introducing-new-flutter-chat-widget) [Syncfusion Essential Studio® 2024 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2024-vol3)