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. ConclusionI 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!
The TreeMap leaf nodes can be colored by populating the multiple color brushes inside the Colors collection of the PaletteColorMapping. XAML <syncfusion:SfTreeMap.LeafColorMapping> <syncfusion:PaletteColorMapping> <syncfusion:PaletteColorMapping.Colors> <SolidColorBrush Color="Red"/> <SolidColorBrush Color="Blue"/> <SolidColorBrush Color="Green"/> <SolidColorBrush Color="Yellow"/> <SolidColorBrush Color="Orange"/> <SolidColorBrush Color="Orchid"/> <SolidColorBrush Color="Brown"/> <SolidColorBrush Color="BlueViolet"/> <SolidColorBrush Color="OrangeRed"/> <SolidColorBrush Color="Magenta"/> <SolidColorBrush Color="Olive"/> <SolidColorBrush Color="Crimson"/> <SolidColorBrush Color="DeepSkyBlue"/> </syncfusion:PaletteColorMapping.Colors> </syncfusion:PaletteColorMapping> </syncfusion:SfTreeMap.LeafColorMapping> Refer to the following online documentation link for more details on PaletteColorMapping: https://help.syncfusion.com/winrt/installation-and-deployment Sample Location for PaletteColorMapping: PaletteColorMapping.zip XAML <syncfusion:SfTreeMap> . . . <syncfusion:SfTreeMap.LeafColorMapping> <syncfusion:PaletteColorMapping> <syncfusion:PaletteColorMapping.Colors> <SolidColorBrush Color="Red"/> <SolidColorBrush Color="Blue"/> <SolidColorBrush Color="Green"/> <SolidColorBrush Color="Yellow"/> <SolidColorBrush Color="Orange"/> <SolidColorBrush Color="Orchid"/> <SolidColorBrush Color="Brown"/> <SolidColorBrush Color="BlueViolet"/> <SolidColorBrush Color="OrangeRed"/> <SolidColorBrush Color="Magenta"/> <SolidColorBrush Color="Olive"/> <SolidColorBrush Color="Crimson"/> <SolidColorBrush Color="DeepSkyBlue"/> </syncfusion:PaletteColorMapping.Colors> </syncfusion:PaletteColorMapping> </syncfusion:SfTreeMap.LeafColorMapping> . . . </syncfusion:SfTreeMap> The following screenshot displays the PaletteColorMapping. Figure SEQ Figure \* ARABIC 1: PaletteColorMapping
