wpf Area Chart with Different Colors?

Question

I a musing the MS toolkit charts and cannot figure out how to change the color of the areas. I need to populate the chart dynamically which means I do not know ahead of time how many sections the area chart will have.

Here is the code I have.

var a = new AreaSeries
{
  Title = "a",
  IndependentValuePath = "Key",
  DependentValuePath = "Value",
  Background = Brushes.Plum
};

I have tried to change both the Fore Ground and Background and no dice.

mcChart.Series.Add(a);

a = new AreaSeries
{
  Title = "b",
  IndependentValuePath = "Key",
  DependentValuePath = "Value",
  Background = Brushes.Peru
};

mcChart.Series.Add(a);

Fill the chart.

((AreaSeries)mcChart.Series[0]).ItemsSource = new[]
{
  new KeyValuePair<string, int>("1", 100),
  new KeyValuePair<string, int>("2", 180),
  new KeyValuePair<string, int>("3", 110),
  new KeyValuePair<string, int>("4", 95),
  new KeyValuePair<string, int>("5", 40),
  new KeyValuePair<string, int>("6", 95)
};

((AreaSeries)mcChart.Series[1]).ItemsSource = new[]
{
  new KeyValuePair<string, int>("1", 150),
  new KeyValuePair<string, int>("2", 280),
  new KeyValuePair<string, int>("3", 310),
  new KeyValuePair<string, int>("4", 195),
  new KeyValuePair<string, int>("5", 340),
  new KeyValuePair<string, int>("6", 195)
};

I am new to wpf and I cannot figure out what is wrong with this.

Here is the XAML

<chartingToolkit:Chart 
  Width="600" Height="450"
  Name="mcChart" 
  Background="LightBlue"
  Foreground="DarkBlue"
  Title="Area Chart">                
</chartingToolkit:Chart>

How do I change the color of area a and area b. Right now they are what ever color is default even though I set the background and foreground.

Thanks.

Answer 1

You can use the Chart.Palette property like this:

<Grid>
    <charting:Chart>
        <charting:Chart.Palette>
            <visualizationToolkit:ResourceDictionaryCollection>
                <ResourceDictionary>
                    <Style x:Key="DataPointStyle" TargetType="Control">
                        <Setter Property="Background" Value="MistyRose"/>
                    </Style>
                </ResourceDictionary>
                <ResourceDictionary>
                    <Style x:Key="DataPointStyle" TargetType="Control">
                        <Setter Property="Background" Value="AliceBlue"/>
                    </Style>
                </ResourceDictionary>
            </visualizationToolkit:ResourceDictionaryCollection>
        </charting:Chart.Palette>
        <charting:AreaSeries Title="Series 1"/>
        <charting:AreaSeries Title="Series 2"/>
    </charting:Chart>
</Grid>

• Here is some more information.