How to apply gradient colors to .NET MAUI Chart (SfCartesianChart)?

The Cartesian chart offers a powerful way to visualise data series using gradient colors. Gradients can be easily applied to the chart using the PaletteBrushes or Fill property with the help of a LinearGradientBrush. This article provides step-by-step guidelines on how to apply gradient colors to the .NET MAUI Cartesian charts.

Configuring .NET MAUI Cartesian Charts:

Initialize the Syncfusion .NET MAUI Cartesian chart using user guide document.

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

Apply Gradient Color using XAML:

<chart:SfCartesianChart>
...
 <chart:SplineAreaSeries>
<chart:SplineAreaSeries.Fill>
        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
        <GradientStop Color="#336699" Offset="0" />
        <GradientStop Color="#d9e6f2" Offset="1" />
    </LinearGradientBrush>
    </chart:SplineAreaSeries.Fill>
</chart:SplineAreaSeries>
</chart:SfCartesianChart>

Apply Gradient Color using viewmodel:

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

       public ViewModel()
       {
           
           CustomBrushes = new List<Brush>();
           LinearGradientBrush linearGradientBrush = new LinearGradientBrush();
           linearGradientBrush.StartPoint = new Point(0, 0.5);
           linearGradientBrush.EndPoint = new Point(1, 0.5);
           linearGradientBrush.GradientStops = new GradientStopCollection()
           {
               new GradientStop() { Offset = 0, Color = Color.FromRgb(51, 102, 153) },
               new GradientStop() { Offset = 1, Color = Color.FromRgb(217, 230, 242) }
           };

           CustomBrushes.Add(linearGradientBrush);
       }
   }

<chart:SfCartesianChart>
...
<chart:SplineAreaSeries ItemsSource="{Binding Data}"  
                       XBindingPath="Year" 
                       YBindingPath="Revenue" 
                       PaletteBrushes="{Binding CustomBrushes}"/>
  
</chart:SfCartesianChart>

Conclusion
I hope you enjoyed learning about how to apply gradient to .NET MAUI Cartesian chart.

You can refer to our .NET MAUI Charts feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI Charts documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components from the Licence and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI Charts and other .NET MAUI components.

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