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

The .NET MAUI Cartesian Chart provides a visually appealing way to represent data 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 the user guide document.

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.

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 how to apply gradient colors to the .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, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Charts and other .NET MAUI components.

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