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: