How to use a custom color palette

By default the charts are using a built-in color palette to visualize the data. But you can easily define a custom color palette as follows.

  1. Add a new item of type 'chart:ResourceDictionaryCollection' to your app (e.g. in Generix.xaml) and give it a unique key.
  2. For each color add a new 'ResourceDictionary' entry to this collection, each with a unique key attribute.
  3. For each entry add a single Brush element. You can use all supported brushes like SolidColorBrush, LinearGradientBrush etc.
  4. Assign your custom palette as a resource to your charts in property 'Palette'

Sample: Define your palette e.g. in 'Generic.xaml'

<ResourceDictionary 
    ....
    <chart:ResourceDictionaryCollection x:Key="CustomColors">
        <ResourceDictionary>
            <SolidColorBrush x:Key="Brush1" Color="#FF5B9BD5" />
        </ResourceDictionary>
        <ResourceDictionary>
            <SolidColorBrush x:Key="Brush2" Color="#FFED7D31" />
        </ResourceDictionary>
        <ResourceDictionary>
            <SolidColorBrush x:Key="Brush3" Color="#FFA5A5A5" />
        </ResourceDictionary>
        <ResourceDictionary>
            <SolidColorBrush x:Key="Brush4" Color="#FFFFC000" />
        </ResourceDictionary>
        <!-- add more values with a different key -->
    </chart:ResourceDictionaryCollection>
    ...

Sample: Assign the palette to your chart

    <chart:DoughnutChart  
        ChartTitle="Doughnut Chart"                                
        ChartSubTitle="Chart with fixed width and height"
        ...
        Palette="{StaticResource CustomColors}"
        ...>
        <chart:PieChart.Series>
            <chart:ChartSeries
                SeriesTitle="Warnings"
                DisplayMember="Category"
                ValueMember="Number"
                ItemsSource="{Binding Path=Warnings}">
            </chart:ChartSeries>
        </chart:PieChart.Series>
    </chart:DoughnutChart>

Result with LinearGradientBrush and a SolidColorBrush (mono chrome)

Last edited May 6, 2013 at 8:47 AM by torman119, version 6

Comments

cpgtech Mar 4, 2015 at 10:22 AM 
Great Control!
Please, is it possible to change the color of X-axis and Y axis?
How do that ?
Thanks