New to Telerik UI for WinUI? Download free 30-day trial

Define and Use Custom Chart Palette

When a user needs to define a custom set of colors, they can take advantage of custom palettes. This can be done in either code or XAML.

Define a Palette in Code

In order to create a palette in code, you can instantiate a ChartPalette instance and populate the Brushes collection of the FillEntries and StrokeEntries properties.

Example 1: Creating a custom palette in code

public class CustomPalettes 
{ 
    static CustomPalettes() 
    { 
        CreateCustomDarkPalette(); 
    } 
 
    private static void CreateCustomDarkPalette() 
    { 
        ChartPalette palette = new ChartPalette() { Name = "CustomDark" }; 
 
        // fill 
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 40, 152, 228))); 
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 205, 0))); 
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 60, 0))); 
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 210, 202, 202))); 
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 67, 67, 67))); 
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 255, 156))); 
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 109, 49, 255))); 
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 178, 161))); 
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 109, 255, 0))); 
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 128, 0))); 
 
        // stroke 
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 96, 194, 255))); 
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 225, 122))); 
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 108, 79))); 
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 229, 229, 229))); 
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 84, 84, 84))); 
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 255, 156))); 
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 130, 79, 255))); 
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 69, 204, 191))); 
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 185, 255, 133))); 
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 175, 94))); 
 
        CustomDark = palette; 
    } 
 
    public static ChartPalette CustomDark { get; private set; } 
 
} 

Example 2: Setting the Palette property of the chart

this.chart.Palette = CustomPalettes.CustomDark; 

Define a Palette in XAML

In order to create a palette in xaml, you can instantiate a ChartPalette instance in your Resources and populate the FillEntries and StrokeEntries.

Example 3: Creating a custom palette in xaml

<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart" 
      xmlns:telerikCharting="using:Telerik.Charting"> 
    <Grid.Resources> 
        <telerikChart:ChartPalette x:Key="CustomPalette"> 
            <telerikChart:ChartPalette.FillEntries> 
                <telerikChart:PaletteEntryCollection> 
                    <SolidColorBrush Color="Green"></SolidColorBrush> 
                    <SolidColorBrush Color="Gray"></SolidColorBrush> 
                    <SolidColorBrush Color="Blue"></SolidColorBrush> 
                    <SolidColorBrush Color="Red"></SolidColorBrush> 
                </telerikChart:PaletteEntryCollection> 
            </telerikChart:ChartPalette.FillEntries> 
            <telerikChart:ChartPalette.StrokeEntries> 
                <telerikChart:PaletteEntryCollection> 
                    <SolidColorBrush Color="LightGreen"></SolidColorBrush> 
                    <SolidColorBrush Color="LightGray"></SolidColorBrush> 
                    <SolidColorBrush Color="LightBlue"></SolidColorBrush> 
                    <SolidColorBrush Color="OrangeRed"></SolidColorBrush> 
                </telerikChart:PaletteEntryCollection> 
            </telerikChart:ChartPalette.StrokeEntries> 
        </telerikChart:ChartPalette> 
    </Grid.Resources> 
 
    <telerikChart:RadCartesianChart x:Name="chart" Palette="{StaticResource CustomPalette}"> 
        <telerikChart:RadCartesianChart.VerticalAxis> 
            <telerikChart:LinearAxis/> 
        </telerikChart:RadCartesianChart.VerticalAxis> 
        <telerikChart:RadCartesianChart.HorizontalAxis> 
            <telerikChart:CategoricalAxis/> 
        </telerikChart:RadCartesianChart.HorizontalAxis> 
 
        <telerikChart:BarSeries PaletteMode="DataPoint"> 
            <telerikChart:BarSeries.DataPoints> 
                <telerikCharting:CategoricalDataPoint Category="Apples" Value="5" /> 
                <telerikCharting:CategoricalDataPoint Category="Oranges" Value="9" /> 
                <telerikCharting:CategoricalDataPoint Category="Pineaples" Value="8" /> 
            </telerikChart:BarSeries.DataPoints> 
        </telerikChart:BarSeries> 
    </telerikChart:RadCartesianChart> 
</Grid> 

Figure 1: RadCartesianChart with custom Palette

RadCartesianChart with custom Palette

In this article
Not finding the help you need?