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>