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

This article explains how to render a multi-colored line chart in the .NET MAUI Cartesian Chart. You can use the PaletteBrushes property to apply different colors to line series, creating 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 to specify colors for 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

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to render a multi-color line chart using .NET MAUI Cartesian Chart.

Refer to our .NET MAUI Chart 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 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!