Color Palette

Updated on Mar 26, 2026

The Chart color palette is a colorization mechanism that allow you to define a set of strokes and fills, which are automatically applied to the visual elements representing the chart data (like bars, lines, slices, etc.).

The Chart palette system is index based, which means that the first color from the palette will be applied to the first chart series, the second color to the second series and so on. When you reach the last color from the palette, the colors will start applying for the first color all over again.

To use the palette mechanism, create a ChartPalette instance and populate its FillEntries and StrokeEntries collections with Brush objects.

Define the Palette in Code

The following examples show how to implement a custom ChartPalette and assign it to the Palette property of the chart using C# code.

Creating a custom palette in code

C#

public static class CustomPalettes
{
	static CustomPalettes()
	{
		InitializePalette();
	}
	
	public static ChartPalette CustomPalette { get; private set; }

	private static void InitializePalette()
	{
		ChartPalette palette = new ChartPalette() { Name = "CustomPalette" };

		// 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)));

		CustomPalette = palette;
	}
}

Setting the Palette property of the chart in code

C#

private void RadCartesianChart_Loaded(object sender, RoutedEventArgs e)
{
	this.chart.Palette = CustomPalettes.CustomPalette;
}

Define the Palette in XAML

The following examples show how to implement a custom ChartPalette and assign it to the Palette property of the chart using XAML.

Creating a custom palette in xaml

XAML

<telerik:RadCartesianChart>            
	<telerik:RadCartesianChart.HorizontalAxis>
		<telerik:CategoricalAxis/>
	</telerik:RadCartesianChart.HorizontalAxis>
	<telerik:RadCartesianChart.VerticalAxis >
		<telerik:LinearAxis />
	</telerik:RadCartesianChart.VerticalAxis>

	<telerik:RadCartesianChart.Series>
		<telerik:PointSeries ZIndex="100">
			<telerik:PointSeries.DataPoints >
				<telerikCharting:CategoricalDataPoint Category="January" Value="1" />
				<telerikCharting:CategoricalDataPoint Category="February" Value="5" />
			</telerik:PointSeries.DataPoints>
		</telerik:PointSeries>
		<telerik:BarSeries>
			<telerik:BarSeries.DataPoints>
				<telerikCharting:CategoricalDataPoint Category="January" Value="3" />
				<telerikCharting:CategoricalDataPoint Category="February" Value="5" />
			</telerik:BarSeries.DataPoints>
		</telerik:BarSeries>
	</telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>

RadCartesianChart with custom Palette