Telerik UI for Windows Phone by Progress

Creating Custom palettes

In this article we are going to create a custom palette. There are two collections which we can use to set the colors in our palette. The first is the GlobalEntries and the other is SeriesEntries. The GlobalEntries is a collection of PaletteEntries, which will be used for all types of chart series. The SeriesEntries allows us to specify different collections of PaletteEntries for each type of chart series. For example, if we want to have one behavior for the pie series and another for the bar series, here is how we can achieve it:

CopyXAML
<chart:ChartPalette x:Key="paletteEntryCollection">

  <chart:ChartPalette.SeriesEntries>
    <chart:PaletteEntryCollection SeriesFamily="Pie">
      <chart:PaletteEntry Fill="#FF1FAFD3" Stroke="{StaticResource PhoneForegroundBrush}"/>
      <chart:PaletteEntry Fill="#FFC32E0A" Stroke="{StaticResource PhoneForegroundBrush}"/>
      <chart:PaletteEntry Fill="#FFFA6F5E" Stroke="{StaticResource PhoneForegroundBrush}"/>
    </chart:PaletteEntryCollection>
    <chart:PaletteEntryCollection SeriesFamily="Bar">
      <chart:PaletteEntry Fill="#FF006968" Stroke="{StaticResource PhoneForegroundBrush}"/>
      <chart:PaletteEntry Fill="#FF7A6CC4" Stroke="{StaticResource PhoneForegroundBrush}"/>
      <chart:PaletteEntry Fill="#FF1FAFD3" Stroke="{StaticResource PhoneForegroundBrush}"/>
    </chart:PaletteEntryCollection>
  </chart:ChartPalette.SeriesEntries>

  <chart:ChartPalette.GlobalEntries>
    <chart:PaletteEntry Fill="#FF21B573" Stroke="{StaticResource PhoneForegroundBrush}" />
    <chart:PaletteEntry Fill="#FF88CA2A" Stroke="{StaticResource PhoneForegroundBrush}" />
    <chart:PaletteEntry Fill="#FFFF921E" Stroke="{StaticResource PhoneForegroundBrush}" />
  </chart:ChartPalette.GlobalEntries>

</chart:ChartPalette>

Notice the SeriesFamily property, which is available for the collections in the SeriesEntries. If we have this palette in a chart, the first collection will be used for the pie series, the second - for the bar series and for all other types of series - the GlobalEntries collection.

Note

Note that defining GlobalEntries is not mandatory, but it may turn useful if the palette is used for different types of series.

CopyXAML
<chart:RadPieChart Palette="{StaticResource paletteEntryCollection}">

  <chart:PieSeries>
    <chartEngine:PieDataPoint Value="9" />
    <chartEngine:PieDataPoint Value="3" />
    <chartEngine:PieDataPoint Value="3" />
  </chart:PieSeries>

</chart:RadPieChart>

Here is a snapshot of this example:

radchart-palettes-entries-pie
CopyXAML
<chart:RadCartesianChart Palette="{StaticResource paletteEntryCollection}">
  <chart:RadCartesianChart.HorizontalAxis>
    <chart:CategoricalAxis/>
  </chart:RadCartesianChart.HorizontalAxis>
  <chart:RadCartesianChart.VerticalAxis>
    <chart:LinearAxis/>
  </chart:RadCartesianChart.VerticalAxis>
  <chart:AreaSeries CombineMode="Stack">
    <chartEngine:CategoricalDataPoint Value="3"/>
    <chartEngine:CategoricalDataPoint Value="1"/>
    <chartEngine:CategoricalDataPoint Value="2"/>
    <chartEngine:CategoricalDataPoint Value="5"/>
    <chartEngine:CategoricalDataPoint Value="6"/>
  </chart:AreaSeries>
  <chart:AreaSeries CombineMode="Stack">
    <chartEngine:CategoricalDataPoint Value="5"/>
    <chartEngine:CategoricalDataPoint Value="3"/>
    <chartEngine:CategoricalDataPoint Value="4"/>
    <chartEngine:CategoricalDataPoint Value="2"/>
    <chartEngine:CategoricalDataPoint Value="3"/>
  </chart:AreaSeries>
  <chart:AreaSeries CombineMode="Stack">
    <chartEngine:CategoricalDataPoint Value="2"/>
    <chartEngine:CategoricalDataPoint Value="5"/>
    <chartEngine:CategoricalDataPoint Value="4"/>
    <chartEngine:CategoricalDataPoint Value="5"/>
    <chartEngine:CategoricalDataPoint Value="3"/>
  </chart:AreaSeries>
</chart:RadCartesianChart>

Here is a snapshot of this example:

radchart-palettes-entries-area

The first example is a pie chart with pie series and the colors are from the collection where SeriesFamily is set to "Pie". The second is a Cartesian chart with area series. Since we did not set a specific PaletteEntryCollection for the area series, the chart uses the GlobalEntries.