How to create overfilled RadialBarSeries in Flutter CircularChart?

In this article, we will learn how to create an overfilled radial bar using SfCircularChart. A RadialBarSeries is a Circular Chart where data is represented as bars arranged around a circle. This type of chart is very effective for tracking progress towards a goal or comparing different values in a straightforward and visually appealing manner.

An overfilled RadialBarSeries allows the bars to extend beyond a specified limit, making it easier to identify when a value exceeds its target. This feature helps track things like daily steps, spending, or performance, even when the actual numbers go beyond the set goal.

By following the steps, you will learn how to create an overfilled RadialBarSeries.

Step 1: Initializing the data for the Chart

In this step, we create a list of data points for the overfilled RadialBarSeries. Each data point represents a progress level (Low, Average, and High) with a corresponding value and color.

class OverfilledRadialBarState extends State<OverfilledRadialBar> {
  late List<ChartData> _chartData;

  @override
  void initState() {
    _chartData = [
      ChartData('Low \n3.5k/6k', 3500, Color.fromRGBO(235, 97, 143, 1), 'Low'),
      ChartData('Average \n7.2k/6k', 7000, Color.fromRGBO(145, 132, 202, 1),'Average'),
      ChartData('High \n10.5k/6k', 10500, Color.fromRGBO(69, 187, 161, 1), 'High'),
    ];
    super.initState();
  }
}

Step 2: Build the RadialBarSeries

The SfCircularChart widget is used to create the overfilled RadialBarSeries, with RadialBarSeries defining the bars. The dataSource contains the chart data, where xValueMapper assigns CategoryAxis (e.g., “Low,” “Average,” “High”), and yValueMapper sets the corresponding values. The pointColorMapper applies colors to each bar, while dataLabelMapper adds labels. The dataLabelSettings ensures labels are visible.

The maximumValue is set to 6000, meaning bars that exceed this limit will extend beyond it. The radius (70%) adjusts the bar size, and gap creates spacing between bars. The cornerStyle.bothCurve gives the bars rounded edges.

@override
Widget build(BuildContext context) {
  return _buildRadialBarChart();
}

SfCircularChart _buildRadialBarChart() {
  return SfCircularChart(
    ....
    series: <RadialBarSeries<ChartData, String>>[
      RadialBarSeries<ChartData, String>(
        dataSource: _chartData,
        xValueMapper: (ChartData data, int index) => data.x,
        yValueMapper: (ChartData data, int index) => data.y,
        pointColorMapper: (ChartData data, int index) => data.color,
        dataLabelMapper: (ChartData data, int index) => data.text,
        dataLabelSettings: DataLabelSettings(isVisible: true),
        maximumValue: 6000,  // Defined maximum value
        radius: '70%',
        gap: '2%',
        cornerStyle: CornerStyle.bothCurve,
      ),
    ],
    ....
  );
}

Step 3: Adding a legend

A legend helps users understand what each color or symbol in the chart represents. It acts as a key that explains the different data categories in a visual way. It is made visible using isVisible is set to true. The iconHeight and iconWidth define the size of the icons next to the legend labels, making them clear and easy to recognize. The overflowMode is set to LegendItemOverflowMode.wrap ensures that if there are too many legend items, they will wrap to the next line instead of getting cut off.

SfCircularChart _buildRadialBarChart() {
  return SfCircularChart(
    legend: Legend(
      isVisible: true,
      iconHeight: 20,
      iconWidth: 20,
      overflowMode: LegendItemOverflowMode.wrap,
    ),
    ....
  );
}

Step 4: Add tooltip for RadialBarSeries

We can enable tooltip functionality to display additional details when interacting with the chart. The tooltipBehavior property is used to show tooltips when users hover or tap on the chart. It is enabled with TooltipBehavior class set enable to true. The onTooltipRender function customizes the tooltip text by formatting the values using NumberFormat.compactCurrency, which makes numbers easier to read. This ensures users get more details when interacting with the chart.

class OverfilledRadialBarState extends State<OverfilledRadialBar> {
  TooltipBehavior? _tooltipBehavior;
  ....

  @override
  void initState() {
    ....
    _tooltipBehavior = TooltipBehavior(enable: true);
    super.initState();
  }

SfCircularChart _buildRadialBarChart() {
  return SfCircularChart(
    ....
    tooltipBehavior: _tooltipBehavior,
    onTooltipRender: (TooltipArgs args) {
      final NumberFormat numberFormat = NumberFormat.compactCurrency(
        decimalDigits: 2,
        symbol: '',
      );
      args.text = '${_chartData[args.pointIndex as int].text} : ${numberFormat.format(_chartData[args.pointIndex as int].y)}';
    },
  );
}
}

Step 5: Add Chart annotations

The Chart annotations allow adding extra information inside the chart. Here, the CircularChartAnnotation is used to display a goal label in the center of the chart. The height (35%) and width (65%) define its size. Inside the annotation, we displaying “Goal -” in bold with a font size of 20, and another showing “6k steps/day” with a smaller font size of 10. The Padding ensures proper spacing at the top for better alignment.

SfCircularChart(
  ....
  annotations: <CircularChartAnnotation>[
    _buildAnnotation(),
  ],
  ....
);

CircularChartAnnotation _buildAnnotation() {
  return CircularChartAnnotation(
    height: '35%',
    width: '65%',
    widget: Column(
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(top: 15),
          child: Text('Goal -',style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
        ),
        Text('6k steps/day',style: TextStyle(fontWeight: FontWeight.bold, fontSize: 10)),
      ],
    ),
  );
}

By following these steps and the provided code snippet, you can successfully create overfilled RadialBarSeries.

View the sample in GitHub.

Conclusion

I hope you enjoyed learning about how to create overfilled RadialBarSeries in Flutter CircularChart.

You can refer to our Flutter CircularChart feature tour page to know 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!