Changing Default Colors of WPFToolkit Chart Control

Question

Does anyone know how to or found any good examples of explicitly setting the color of the data points series when using the WPFToolkit chart control? I would like to set this as a style in my XAML.

Answer 1

You can set the Palette on the Chart. This example is for a ColumnSeries, but you can adapt it for whatever type you are using.

<charting:Chart ... Palette="{StaticResource MyPalette}">

The Palette definition looks like this:

<datavis:ResourceDictionaryCollection x:Key="MyPalette">
   <ResourceDictionary>
      <Style x:Key="DataPointStyle" BasedOn="{StaticResource ColumnSeries1Style}" TargetType="Control" />
   </ResourceDictionary>
   <ResourceDictionary>
      <Style x:Key="DataPointStyle" BasedOn="{StaticResource ColumnSeries2Style}" TargetType="Control" />
   </ResourceDictionary>
   ... add more if necessary
</datavis:ResourceDictionaryCollection>

The "ColumnSeries1Style" and "ColumnSeries1Style" styles define the background brush for the series:

<Style x:Key="ColumnSeries1Style" TargetType="Control">
   <Setter Property="Background" Value="{StaticResource Series1Brush}" />
</Style>

<Style x:Key="ColumnSeries2Style" TargetType="Control">
   <Setter Property="Background" Value="{StaticResource Series2Brush}" />
</Style>

You can define the brushes however you like. Here is how to get the gradient fill used in the default charts:

<Color x:Key="Series1Color" A="255" R="139" G="180" B="232" />
<Color x:Key="Series1HighlightColor" A="255" R="188" G="229" B="255" />
<RadialGradientBrush x:Key="Series1Brush">
   <RadialGradientBrush.RelativeTransform>
      <TransformGroup>
         <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819" />
         <TranslateTransform X="-0.425" Y="-0.486" />
      </TransformGroup>
   </RadialGradientBrush.RelativeTransform>
   <GradientStop Color="{StaticResource Series1HighlightColor}"/>
   <GradientStop Color="{StaticResource Series1Color}" Offset="1"/>
</RadialGradientBrush>

Answer 2

Just in case anybody is interested, there is a simpler way of doing it. You just need to set the DataPointStyle in the ColumnSeries and change the Background property.

<DVC:ColumnSeries IndependentValueBinding="{Binding Path=Key}" 
            DependentValueBinding="{Binding Path=Value}">
                <DVC:ColumnSeries.DataPointStyle>
                    <Style TargetType="DVC:ColumnDataPoint">
                        <Setter Property="Background" Value="#00777F"/>
                    </Style>
                </DVC:ColumnSeries.DataPointStyle>

            </DVC:ColumnSeries>