How to apply point color to the tracker in the radial bar series in Flutter Circular Chart?

In this article, we explain how to apply point color to the tracker in the radial bar series by using the Flutter circular chart.

The SfCircularChart widget supports for RadialBarseries, here we can apply different colors to each tracker of the radial bar using the pointColorMapper, trackOpacity, and useSeriesColor properties from RadialBarseries.

The following steps explain how to apply point color to the trackers in the radial bar series.

Step 1: Initialize the chartData variable which holds the data source for the chart. Here add the color for each data point.

late List<ChartData> chartData;
 
@override
void initState() {
  chartData = <ChartData>[
    ChartData(1, 11, const Color.fromRGBO(248, 177, 149, 1.0)),
    ChartData(2, 12, const Color.fromRGBO(246, 114, 128, 1.0)),
    ChartData(3, 13, const Color.fromRGBO(61, 205, 171, 1.0)),
    ChartData(4, 14, const Color.fromRGBO(1, 174, 190, 1.0)),
  ];
  super.initState();
}
 
class ChartData {
  ChartData(this.x, this.y, this.color);
    final int x;
    final int y;
    final Color color;
}

Step 2: Create the SfCircularChart widget with the RadialBarseries and initialize the required properties. To apply the point’s color to the tracker, set useSeriesColor as true and map the color from chartData to pointColorMapper property. Set opacity for the tracker using the trackOpacity property.

@override
 Widget build(BuildContext context) {
    return SfCircularChart(
      series: <RadialBarSeries<ChartData, int>>[
        RadialBarSeries<ChartData, int>(
          dataSource: chartData,
          useSeriesColor: true,
          trackOpacity: 0.3,
          gap: ‘6%’,
          xValueMapper: (ChartData data, _) => data.x,
          yValueMapper: (ChartData data, _) => data.y,
          pointColorMapper: (ChartData data, _) => data.color
        )
      ]
    );
  }

Now the radial bar series will render with different colors on each tracker.

View the sample in GitHub.

Conclusion

I hope you enjoyed learning how to apply point color to the tracker in the radial bar series (SfCircularChart).

You can refer to our Flutter Circular Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter Circular Chart example 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!