How to Customize the Color of Inactive Tracks in Syncfusion Flutter RadialBarSeries?

The RadialBarSeries includes a feature that allows customization of the color for each active track using the pointColorMapper property. Additionally, by setting the useSeriesColor property to true, you can extend the color of the active track to the inactive tracks as well. Despite these options, the functionality to assign distinct colors to each inactive track, which are separate from the colors of the active tracks, is not available at present.

This article will guide you through the process of assigning distinct colors to each inactive track within the radial bar series by using an onCreateRenderer callback. By utilizing the customizeSegment method, we tailored the look of the segment, specifically by altering the track fill color. The chosen colors correspond to the trackColor attribute tied to the relevant data point within the chartData. To identify the appropriate data point for the segment currently being drawn, we rely on the currentSegmentIndex attribute of the radial bar segment.

Here’s how to assign distinct colors to each inactive track within a radial bar series.

Step 1: Create the chartData list which will hold the data points for x, y, color, and trackColor. Then, create the SfCircularChart widget with the RadialBarSeries and assign the chartData to the dataSource property. Map the x, y, and color values to the xValueMapper, yValueMapper, and pointColorMapper properties respectively.

final List<ChartData> chartData = [
   ChartData('David', 25, const Color.fromARGB(255, 168, 214, 16), trackColor: const Color.fromARGB(255, 196, 226, 183)),
   ChartData('Steve', 38, const Color.fromARGB(255, 32, 247, 43), trackColor: Colors.grey),
 ];

 @override
 Widget build(BuildContext context) {
   return Center(
     child: SizedBox(
       height: 300,
       child: SfCircularChart(
         series: <CircularSeries>[
           RadialBarSeries<ChartData, String>(           
             dataSource: chartData,
             xValueMapper: (ChartData data, _) => data.x,
             yValueMapper: (ChartData data, _) => data.y,
             pointColorMapper: (ChartData data, _) => data.color,
           ),
         ],
       ),
     ),
   );
 }
}

class ChartData {
 ChartData(this.x, this.y, this.color, {this.trackColor});
 
 final String x;
 final double y;
 final Color color;
 final Color? trackColor;
}

Step 2: Create a renderer class _CustomRadialBarSeriesRenderer extends from RadialBarSeriesRenderer. In the customizeSegment override method, customize the track fill color of the segment by accessing the trackColor property of the associated ChartData based on the currentSegmentIndex.

class _CustomRadialBarSeriesRenderer extends RadialBarSeriesRenderer<ChartData, String> {
 _CustomRadialBarSeriesRenderer({required this.chartData});

 final List<ChartData> chartData;

 @override
 void customizeSegment(ChartSegment segment) {
   super.customizeSegment(segment);
   final RadialBarSegment radialBarSegment = segment as RadialBarSegment;
   segment.trackFillPaint.color =
       chartData[radialBarSegment.currentSegmentIndex].trackColor!.withOpacity(trackOpacity);
 }
}

Step 3: Assign this _CustomRadialBarSeriesRenderer as a renderer to the RadialBarSeries renderer in onCreateRenderer.

child: SfCircularChart(
   series: <CircularSeries>[
       RadialBarSeries<ChartData, String>(
           onCreateRenderer: (series) => _CustomRadialBarSeriesRenderer(chartData: chartData),

The radial bar series now features distinct colors for each inactive track, as demonstrated in the following example.

View the complete sample in GitHub.

Conclusion

We hope you found the tutorial on assigning distinct colors to each inactive tracker in RadialBarSeriesRenderer informative and enjoyable.

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 features functionality in depth.

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!