How to Render Multi-Colored Line Chart Using .NET MAUI Cartesian chart?

This article explains how to render a multi-colored line chart in .NET MAUI SfCartesianChart. You can use the PaletteBrushes property to apply different colors to the line series, allowing you to achieve a visually distinct multi-colored line.

Additionally, the chart also supports the PaletteBrushes property, which can be used to apply custom palette brushes to the chart

By following these steps, you can create a multi-colored line series in SfCartesianChart

Step 1: Define the ViewModel with Custom Brushes
In the ViewModel, create a list of brushes that will be used to color different segments of the line series.

[C#]

public class RainfallViewModel
{
    public ObservableCollection<RainfallData> Data { get; set; }

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

    public RainfallViewModel()
    {
        . . .
        CustomBrushes = new List<Brush>
        {
            new SolidColorBrush(Color.FromRgb(255, 167, 38)),  
            new SolidColorBrush(Color.FromRgb(255, 167, 38)),
            new SolidColorBrush(Color.FromRgb(255, 167, 38)),
            new SolidColorBrush(Color.FromRgb(255, 167, 38)),
            new SolidColorBrush(Color.FromRgb(233, 30, 99)),  
            new SolidColorBrush(Color.FromRgb(233, 30, 99)),
            new SolidColorBrush(Color.FromRgb(233, 30, 99)),
            new SolidColorBrush(Color.FromRgb(233, 30, 99)),
            new SolidColorBrush(Color.FromRgb(33, 150, 243)),  
            new SolidColorBrush(Color.FromRgb(33, 150, 243)),
            new SolidColorBrush(Color.FromRgb(33, 150, 243)),
            new SolidColorBrush(Color.FromRgb(33, 150, 243)),
            new SolidColorBrush(Color.FromRgb(0, 188, 212)),   
            new SolidColorBrush(Color.FromRgb(0, 188, 212)),
            new SolidColorBrush(Color.FromRgb(0, 188, 212)),
            new SolidColorBrush(Color.FromRgb(0, 188, 212)),
            new SolidColorBrush(Color.FromRgb(76, 175, 80)), 
            new SolidColorBrush(Color.FromRgb(76, 175, 80)),
            new SolidColorBrush(Color.FromRgb(76, 175, 80)),
            new SolidColorBrush(Color.FromRgb(76, 175, 80)),
        };
    }
}

Step 2: Applying PaletteBrushes to the Series
Set the CustomBrushes collection to the PaletteBrushes property of the Line series.
[XAML]

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

[C#]

SfCartesianChart chart = new SfCartesianChart();
. . .
LineSeries series = new LineSeries()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "Year",
    YBindingPath = "Rainfall",
    PaletteBrushes = new ViewModel().CustomBrushes
};

chart.Series.Add(series);
this.Content = chart;

Output

Explore the runnable demo from this GitHub location.

Conclusion

I hope you enjoyed learning how to Render Multi-Colored Line Chart Using .NET MAUI Cartesian chart.

Refer to our .NET MAUI Chart’s feature tour page to learn 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, 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 Chart 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!