How to customize the chart color for Sunburst Chart in .NET MAUI

This article provides a detailed walkthrough on customizing the chart colors in a .NET MAUI Sunburst Chart.

The SfSunburstChart provides support for PaletteBrushes, which allows you to customize chart colors with both solid and gradient options. This feature is particularly beneficial for ensuring the chart’s appearance aligns seamlessly with your application’s design.

Learn step-by-step instructions and gain insights to customize the chart color.

Apply Solid Colors

To apply solid color brushes, define the SfSunburstChart in XAML and bind the PaletteBrushes property to a collection of solid color brushes in the ViewModel.

C#

public class ViewModel
{
   .....
   public List<Brush> CustomBrushes { get; set; }

   public ViewModel()
   {
       ......
       CustomBrushes = new List<Brush>()
       {
           new SolidColorBrush(Color.FromArgb("#2D89EF")),
           new SolidColorBrush(Color.FromArgb("#F7630C")),
           new SolidColorBrush(Color.FromArgb("#8E44AD")),
           new SolidColorBrush(Color.FromArgb("#16A085")),
           new SolidColorBrush(Color.FromArgb("#D9534F"))
       };
   }
} 

XAML

<sunburst:SfSunburstChart ItemsSource="{Binding DataSource}" 
                 ShowLabels="True"  
                 EnableTooltip="True"
                 ValueMemberPath="Consumption" PaletteBrushes="{Binding CustomBrushes}" Margin="10">

   ......
   <sunburst:SfSunburstChart.Levels>
       <sunburst:SunburstHierarchicalLevel GroupMemberPath="Continent"/>
       <sunburst:SunburstHierarchicalLevel GroupMemberPath="EnergyType"/>
       <sunburst:SunburstHierarchicalLevel GroupMemberPath="Source"/>
   </sunburst:SfSunburstChart.Levels>
</sunburst:SfSunburstChart> 

Output:

Apply Gradient Colors

To apply gradient color brushes, define the SfSunburstChart in XAML and bind the PaletteBrushes property to a collection of gradient color brushes in the ViewModel.

C#

public class ViewModel
{
   .....
   public List<Brush> CustomGardientBrushes { get; set; }

   public ViewModel()
   {
       ........
       CustomGardientBrushes = new List<Brush>()
       {
           new LinearGradientBrush(
           new GradientStopCollection
           {
              new GradientStop(Color.FromArgb("#33FF99"), 0.0f),
              new GradientStop(Color.FromArgb("#66FF66"), 0.5f),
              new GradientStop(Color.FromArgb("#99FF33"), 1.0f)
           },
           new Point(0, 0),
           new Point(1, 1)),

           new LinearGradientBrush(
           new GradientStopCollection
           {
               new GradientStop(Color.FromArgb("#66CCFF"), 0.0f),
               new GradientStop(Color.FromArgb("#33DDFF"), 0.5f),
               new GradientStop(Color.FromArgb("#99FFFF"), 1.0f)
           },
           new Point(0, 0),
           new Point(1, 1)),

           new LinearGradientBrush(
           new GradientStopCollection
           {
               new GradientStop(Color.FromArgb("#FFEE99"), 0.0f),
               new GradientStop(Color.FromArgb("#FFD166"), 0.5f),
               new GradientStop(Color.FromArgb("#FFAA33"), 1.0f)
           },
           new Point(0, 0),
           new Point(1, 1)),

           new LinearGradientBrush(
           new GradientStopCollection
           {
               new GradientStop(Color.FromArgb("#FF9966"), 0.0f),
               new GradientStop(Color.FromArgb("#FF7755"), 0.5f),
               new GradientStop(Color.FromArgb("#FFAA88"), 1.0f)
           },
           new Point(0, 0),
           new Point(1, 1)), 

           new LinearGradientBrush(
           new GradientStopCollection
           {
               new GradientStop(Color.FromArgb("#DDA0FF"), 0.0f),
               new GradientStop(Color.FromArgb("#BB77FF"), 0.5f),
               new GradientStop(Color.FromArgb("#AA88FF"), 1.0f)
           },
           new Point(0, 0),
           new Point(1, 1)),
       };
   }
} 

XAML

<sunburst:SfSunburstChart ItemsSource="{Binding DataSource}" 
                 ShowLabels="True"  
                 EnableTooltip="True"
                 ValueMemberPath="Consumption" PaletteBrushes="{Binding CustomGardientBrushes}" Margin="10">

   .......
   <sunburst:SfSunburstChart.Levels>
       <sunburst:SunburstHierarchicalLevel GroupMemberPath="Continent"/>
       <sunburst:SunburstHierarchicalLevel GroupMemberPath="EnergyType"/>
       <sunburst:SunburstHierarchicalLevel GroupMemberPath="Source"/>
   </sunburst:SfSunburstChart.Levels>
</sunburst:SfSunburstChart> 

Output:

Conclusion:

I hope you enjoyed learning about how to customize the chart color in .NET MAUI SunburstChart.
You can refer to our .NET MAUI SunburstChart feature tour page to know about its other groundbreaking feature representations.

You can also explore our .NET MAUI Chart documentation to understand how to present 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 trail 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!