Custom Chart Palette

When a user needs to define custom sets of colors, they can take advantage of custom palettes. Here is an example that shows how to achieve this:

Example

Here is an example how to create chart with custom palette:

First, create the needed business model:

public class CategoricalData
{
    public object Category { get; set; }

    public double Value { get; set; }
}

And here is the sample data used as binding context:

public class ViewModel
{
    public ViewModel()
    {
        this.Data1 = GetCategoricalData1();
        this.Data2 = GetCategoricalData2();
        this.Data3 = GetCategoricalData3();
    }

    public ObservableCollection<CategoricalData> Data1 { get; set; }

    public ObservableCollection<CategoricalData> Data2 { get; set; }

    public ObservableCollection<CategoricalData> Data3 { get; set; }

    private static ObservableCollection<CategoricalData> GetCategoricalData1()
    {
        var data = new ObservableCollection<CategoricalData>  {
            new CategoricalData { Category = "A", Value = 0.63 },
            new CategoricalData { Category = "B", Value = 0.85 },
            new CategoricalData { Category = "C", Value = 1.05 },
            new CategoricalData { Category = "D", Value = 0.96 },
            new CategoricalData { Category = "E", Value = 1.1 },
        };
        return data;
    }

    private static ObservableCollection<CategoricalData> GetCategoricalData2()
    {
        var data = new ObservableCollection<CategoricalData>  {
            new CategoricalData { Category = "A", Value = 0.23 },
            new CategoricalData { Category = "B", Value = 0.35 },
            new CategoricalData { Category = "C", Value = 0.55 },
            new CategoricalData { Category = "D", Value = 0.66 },
            new CategoricalData { Category = "E", Value = 0.77 },
        };
        return data;
    }

    private static ObservableCollection<CategoricalData> GetCategoricalData3()
    {
        var data = new ObservableCollection<CategoricalData>  {
            new CategoricalData { Category = "A", Value = 1.63 },
            new CategoricalData { Category = "B", Value = 1.85 },
            new CategoricalData { Category = "C", Value = 2.05 },
            new CategoricalData { Category = "D", Value = 1.96 },
            new CategoricalData { Category = "E", Value = 1.78 },
        };
        return data;
    }
}

Finally, declare the RadCartesianChart in XAML or C#:

<telerikChart:RadCartesianChart>
    <telerikChart:RadCartesianChart.BindingContext>
        <local:ViewModel />
    </telerikChart:RadCartesianChart.BindingContext>
    <telerikChart:RadCartesianChart.VerticalAxis>
        <telerikChart:NumericalAxis />
    </telerikChart:RadCartesianChart.VerticalAxis>
    <telerikChart:RadCartesianChart.HorizontalAxis>
        <telerikChart:CategoricalAxis LabelFitMode="MultiLine" />
    </telerikChart:RadCartesianChart.HorizontalAxis>
    <telerikChart:RadCartesianChart.Series>
        <telerikChart:BarSeries ValueBinding="Value"
                                CategoryBinding="Category"
                                CombineMode="Cluster"
                                ItemsSource="{Binding Data1}" />
        <telerikChart:BarSeries ValueBinding="Value"
                                CategoryBinding="Category"
                                CombineMode="Cluster"
                                ItemsSource="{Binding Data2}" />
        <telerikChart:BarSeries ValueBinding="Value"
                                CategoryBinding="Category"
                                CombineMode="Cluster"
                                ItemsSource="{Binding Data3}" />
    </telerikChart:RadCartesianChart.Series>
    <telerikChart:RadCartesianChart.Palette>
        <telerikChart:ChartPalette>
            <telerikChart:ChartPalette.Entries>
                <telerikChart:PaletteEntry FillColor="Red" StrokeColor="Blue" />
                <telerikChart:PaletteEntry FillColor="Green" StrokeColor="Black" />
                <telerikChart:PaletteEntry FillColor="Blue" StrokeColor="Yellow" />
            </telerikChart:ChartPalette.Entries>
        </telerikChart:ChartPalette>
    </telerikChart:RadCartesianChart.Palette>
</telerikChart:RadCartesianChart>

var chart = new RadCartesianChart
{
    BindingContext = new ViewModel(),
    VerticalAxis = new NumericalAxis(),
    HorizontalAxis = new CategoricalAxis
    {
        LabelFitMode = AxisLabelFitMode.MultiLine
    },
    Series =
    {
        new BarSeries
        {
            CombineMode = ChartSeriesCombineMode.Cluster,
            ValueBinding = new PropertyNameDataPointBinding("Value"),
            CategoryBinding = new PropertyNameDataPointBinding("Category")
        },
        new BarSeries
        {
            CombineMode = ChartSeriesCombineMode.Cluster,
            ValueBinding = new PropertyNameDataPointBinding("Value"),
            CategoryBinding = new PropertyNameDataPointBinding("Category")
        },
        new BarSeries
        {
            CombineMode = ChartSeriesCombineMode.Cluster,
            ValueBinding = new PropertyNameDataPointBinding("Value"),
            CategoryBinding = new PropertyNameDataPointBinding("Category")
        },
    },
    Palette = new ChartPalette
    {
        Entries =
        {
            new PaletteEntry(Color.Red, Color.Blue),
            new PaletteEntry(Color.Green, Color.Black),
            new PaletteEntry(Color.Blue, Color.Yellow)
        }
    }
};

chart.Series[0].SetBinding(ChartSeries.ItemsSourceProperty, "Data1");
chart.Series[1].SetBinding(ChartSeries.ItemsSourceProperty, "Data2");
chart.Series[2].SetBinding(ChartSeries.ItemsSourceProperty, "Data3");

Here is the result:

See Also

• Categorical Series Combine Mode
• Chart Legend
• How To Create Custom Renderer