How to Modify RadialBarSeries Appearance in Flutter Circular Chart?
This article explains how to modify a RadialBarSeries appearance in Flutter Circular Chart. You’ll learn how to modify its appearance, add tooltip, legend, and annotations to make the chart more readable and visually appealing.
To customize the RadialBarSeries, the key properties used are:
- innerRadius: Defines the inner radius of the radial bar.
- animationDuration: Controls the animation time of the radial bar series.
- maximumValue : Sets the maximum value of the radial bar.
- radius: Specifies the overall size of the radial bar.
- cornerStyle: Defines the style of the radial bar corners (e.g., CornerStyle.bothCurve).
Annotations Customization:
CircularChartAnnotation is used with the widget property to annotations property to add text or icons inside the chart for better visual representation.
Legend Customization:
Legend widget is used with:
- isVisible: Enables the legend display.
- overflowMode: Uses LegendItemOverflowMode.wrap to handle overflow.
- legendItemBuilder : Customizes the legend by embedding a RadialBarSeries with an icon in the center and a text label for the category.
Tooltip Customization:
The enable property in tooltipBehavior activates the tooltip, while the format property customizes its display format.
Let’s dive into the code and see how each part contributes to the customization in RadialBarSeries.
Step 1: Initialize and define the chart data
Set up the SfCircularChart with RadialBarSeries by following the guidelines provided in the documentation.
Step 2: Build the RadialBarSeries
The _buildRadialBarSeries method maps each data point from _chartData to the chart.
Several properties are customized to enhance visualization:
- cornerStyle rounds the edges of the bars for a smooth appearance.
- gap controls the spacing between bars for better separation.
- radius defines the overall size of the radial bars.
- animationDuration is set to 0 to disable animation for a static display.
- maximumValue is set to 100 to normalize values and maintain consistency across the chart.
SfCircularChart(
series: <RadialBarSeries<ChartSampleData, String>>[
RadialBarSeries<ChartSampleData, String>(
dataSource: _chartData,
xValueMapper: (ChartSampleData data, int index) => data.x,
yValueMapper: (ChartSampleData data, int index) => data.y,
pointRadiusMapper: (ChartSampleData data, int index) => data.text,
animationDuration: 0,
maximumValue: 100,
gap: '10%',
radius: '90%',
cornerStyle: CornerStyle.bothCurve,
pointColorMapper: (ChartSampleData data, int index) => data.pointColor,
legendIconType: LegendIconType.circle,
),
],
);
Step 3: Add legend with RadialBarSeries and Icons
A legend is added to the chart, including both RadialBarSeries and icons to provide a clear representation of the data categories.
The _buildAnnotationLegend method creates a dataset similar to _chartData, but specifically for the RadialBarSeries in the legend. Each data point represents a category, defining its name, value, percentage, and color. The _buildAnnotationLegendIcon method associates each category with a corresponding icon, improving readability. These icons are placed within CircularChartAnnotation to ensure they are properly positioned in the legend.
The _buildLegend method customizes the legend display. It utilizes legendItemBuilder to construct a customize legend widget for each category, which includes:
- A SfCircularChart with a RadialBarSeries to represent each category proportionally.
- An icon annotation placed at the center of the chart.
- A text label displaying the category name, color-coded to match the respective segment.
List<ChartSampleData>? _iconDataSources;
List<CircularChartAnnotation>? _annotationLegendIcon;
@override
void initState() {
_iconDataSources = _buildAnnotationLegend();
_annotationLegendIcon = _buildAnnotationLegendIcon();
super.initState();
}
List<ChartSampleData> _buildAnnotationLegend() {
return [
ChartSampleData(x: 'Vehicle', y: 62.70, text: '10%', pointColor: const Color.fromRGBO(69, 186, 161, 1.0)),
ChartSampleData(x: 'Education', y: 29.20, text: '10%', pointColor: const Color.fromRGBO(230, 135, 111, 1.0)),
ChartSampleData(x: 'Home', y: 85.20, text: '100%', pointColor: const Color.fromRGBO(145, 132, 202, 1.0)),
ChartSampleData(x: 'Personal', y: 45.70, text: '100%', pointColor: const Color.fromRGBO(235, 96, 143, 1.0)),
];
}
List<CircularChartAnnotation> _buildAnnotationLegendIcon() {
return [
CircularChartAnnotation(widget: Icon(Icons.directions_car, size: 20, color: const Color.fromRGBO(69, 186, 161, 1.0))),
CircularChartAnnotation(widget: Icon(Icons.note, size: 20, color: const Color.fromRGBO(230, 135, 111, 1.0))),
CircularChartAnnotation(widget: Icon(Icons.home, size: 20, color: const Color.fromRGBO(145, 132, 202, 1.0))),
CircularChartAnnotation(widget: Icon(Icons.handshake_sharp, size: 20, color: const Color.fromRGBO(235, 96, 143, 1.0))),
];
}
Legend _buildLegend() {
return Legend(
isVisible: true,
overflowMode: LegendItemOverflowMode.wrap,
legendItemBuilder: (String name, dynamic series, dynamic point, int index) {
return SizedBox(
height: 60,
width: 150,
child: Row(children: <Widget>[
SizedBox(
height: 75,
width: 65,
child: SfCircularChart(
annotations: <CircularChartAnnotation>[
_annotationLegendIcon![index],
],
series: <RadialBarSeries<ChartSampleData, String>>[
RadialBarSeries<ChartSampleData, String>(
dataSource: <ChartSampleData>[_iconDataSources![index]],
xValueMapper: (ChartSampleData data, int index) => point.x,
yValueMapper: (ChartSampleData data, int index) => data.y,
pointColorMapper: (ChartSampleData data, int index) => data.pointColor,
pointRadiusMapper: (ChartSampleData data, int index) => data.text,
innerRadius: '70%',
animationDuration: 0,
maximumValue: 100,
radius: '100%',
cornerStyle: CornerStyle.bothCurve,
),
],
),
),
SizedBox(
width: 72,
child: Text(
point.x,
style: TextStyle(
color: _colors![index],
fontWeight: FontWeight.bold,
),
),
),
]),
);
},
);
}
Step 4: Add annotation for RadialBarSeries
The annotations property adds a bold Text label, “Percentage of loan closure,” to the chart. This provides clear context for the data to enhance the chart’s readability.
SfCircularChart(
....
annotations: <CircularChartAnnotation>[
CircularChartAnnotation(
widget: Text('Percentage \n of \nloan closure',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
],
);
Step 5: Add tooltip for RadialBarSeries
The tooltipBehavior property adds tooltip to the RadialBarSeries, showing details when hovering over a RadialBarSeries. It is enabled with enable property to true, and the format displays the category name (point.x) and its percentage (point.y%) for better data clarity.
SfCircularChart(
....
tooltipBehavior: TooltipBehavior(enable: true, format: 'point.x : point.y%'),
....
);
By following these steps and the provided code snippet, you can successfully customize the RadialBarSeries in Flutter CircularChart.
Conclusion
I hope you enjoyed learning about how to modify radialbar series appearance in Flutter Circular Chart.
You can refer to our Flutter CircularChart feature tour page to learn about its other groundbreaking feature representations. You can also explore our Flutter CircularChart documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
