How to apply gradient color for .NET MAUI Sunburst Chart?

Learn how to apply gradient colors to segments in the Syncfusion .NET MAUI Sunburst Chart to create visually appealing hierarchical data visualizations. Gradients can be easily applied to the sunburst chart using the PaletteBrushes property with the help of a LinearGradientBrush. This article provides step-by-step guidelines on how to apply gradient colors to the .NET MAUI Sunburst Chart.

Step 1: Configure .NET MAUI Sunburst Chart

Initialize the Syncfusion® .NET MAUI Sunburst Chart using the user guide document.

<chart:SfSunburstChart ItemsSource="{Binding DataSource}"
                      ValueMemberPath="Value">

   <!-- Define hierarchical levels -->
   <chart:SfSunburstChart.Levels>
       <chart:SunburstHierarchicalLevel GroupMemberPath="Category"/>
       <chart:SunburstHierarchicalLevel GroupMemberPath="SubCategory"/>
   </chart:SfSunburstChart.Levels>

</chart:SfSunburstChart> 

// Create the Sunburst chart
var sunburstChart = new SfSunburstChart
{
   ValueMemberPath = "Value",
   ItemsSource = viewModel.DataSource,

};

// Add hierarchical levels
sunburstChart.Levels.Add(new SunburstHierarchicalLevel { GroupMemberPath = "Category" });
sunburstChart.Levels.Add(new SunburstHierarchicalLevel { GroupMemberPath = "SubCategory" }); 

Step 2: Create Gradient Color in ViewModel Class

The StartPoint and EndPoint properties of LinearGradientBrush are used to configure the direction of the gradient color, and the GradientStops property is used to set the color based on the offset.

public class SunburstViewModel : INotifyPropertyChanged
{
   private ObservableCollection<Brush> _paletteBrushes;
   public ObservableCollection<Brush> PaletteBrushes
   {
       get => _paletteBrushes;
       set
       {
           _paletteBrushes = value;
           OnPropertyChanged();
       }
   }

   public SunburstViewModel()
   {
       // Initialize gradient brushes
       InitializeGradientBrushes();
   }

   private void InitializeGradientBrushes()
   {
       PaletteBrushes = new ObservableCollection<Brush>
       {
           new LinearGradientBrush
           {
               StartPoint = new Point(0, 0),
               EndPoint = new Point(1, 1),
               GradientStops = new GradientStopCollection
               {
                   new GradientStop { Color = Color.FromArgb("#E63946"), Offset = 0.0f },
                   new GradientStop { Color = Color.FromArgb("#F77F00"), Offset = 0.5f },
                   new GradientStop { Color = Color.FromArgb("#FCBF49"), Offset = 1.0f }
               }
           },

           new LinearGradientBrush
           {
               StartPoint = new Point(0, 0),
               EndPoint = new Point(1, 1),
               GradientStops = new GradientStopCollection
               {
                   new GradientStop { Color = Color.FromArgb("#1D3557"), Offset = 0.0f },
                   new GradientStop { Color = Color.FromArgb("#457B9D"), Offset = 0.5f },
                   new GradientStop { Color = Color.FromArgb("#A8DADC"), Offset = 1.0f }
               }
           },
           // . . .
           // . . .  
   }
} 

Step 3: Bind the gradient color to PaletteBrush property

<chart:SfSunburstChart x:Name="sunburstChart"
                      PaletteBrushes="{Binding PaletteBrushes}">
</chart:SfSunburstChart> 

this.sunburstChart.PaletteBrushes = viewModel.PaletteBrushes; 

Output:

For more details, please refer to the project on GitHub sample.

Conclusion

I hope you enjoyed learning how to apply gradient color for .NET MAUI Sunburst Chart.

You can refer to our .NET MAUI Sunburst Chart feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Sunburst Chart documentation.

For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Rich Text Editor and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!