How to change the colors of each line in a silverlight 4 chart in xaml

Question

How do I change the colors of each line in xaml for the silverlight 4 toolkit chart? I have seen a lot of code behind tricks, but I do not want to do that. Is there a way to do it using mvvm? I would prefer to do it in xaml.

This is what I have tried:

<toolkit:Chart Grid.Row="1" Title="Actuals + Forecast" DataContext="{Binding Path=SelectedSKU}">
            <toolkit:Chart.Series>
                <toolkit:LineSeries Title="Manual Forecast"
                                    ItemsSource="{Binding Path=LstChartData}"
                                    IndependentValueBinding="{Binding Path=StrPeriod}"
                                    DependentValueBinding="{Binding Path=DQuantity}" BorderBrush="#FFFF0300"/>
                <toolkit:LineSeries Title="Automatically Generated Forecast"
                                    ItemsSource="{Binding Path=LstAChartData}"
                                    IndependentValueBinding="{Binding Path=StrPeriod}"
                                    DependentValueBinding="{Binding Path=DQuantity}" Foreground="Green"BorderBrush="Green" />
                <toolkit:LineSeries Title="Actual History"
                                    ItemsSource="{Binding Path=LstMChartData}"
                                    IndependentValueBinding="{Binding Path=StrPeriod}"
                                    DependentValueBinding="{Binding Path=DQuantity}" Foreground="Blue" />
            </toolkit:Chart.Series>
        </toolkit:Chart>

I saw this article: http://blogs.msdn.com/b/delay/archive/2009/02/04/columns-of-a-different-color-customizing-the-appearance-of-silverlight-charts-with-re-templating-and-mvvm.aspx , but it says Silverlight 2. I hear it is completely different than Silverlight 4.

I'm a little confused by this question as far as I can tell from the xaml, each lineseries would be given a different color already by the charts own pallete system. — AnthonyWJones, Aug 03 '11 at 20:58
Yes, but the colors are all different shades of blue. A lot of times my data is close together, so if the colors were say blue, red, and green then it could easily be distinguished. I get 3 differnt shades of blue. I see in examples that that does not happen. I am not sure why this is happening to me. Even if I add foreground or borderbrush. I'll admit I do not fully understand the styles in xaml. — pqsk, Aug 03 '11 at 21:21
@pqsk Post a screenshot of your chart, I don't see anything wrong with the code. Also I answered a similar question about colors here: http://stackoverflow.com/questions/5618581/silverlight-4-chart-toolkit-color-set/5626435#5626435 Maybe that answer will help you. — vortexwolf, Aug 04 '11 at 09:11

pqsk · Accepted Answer · 2011-08-04T13:31:39.110

Figured it out:

<toolkit:Chart Grid.Row="1" Title="Actuals + Forecast" DataContext="{Binding Path=SelectedSKU}">
        <toolkit:Chart.Series>
            <toolkit:LineSeries Title="Manual Forecast"
                                ItemsSource="{Binding Path=LstChartData}"
                                IndependentValueBinding="{Binding Path=StrPeriod}"
                                DependentValueBinding="{Binding Path=DQuantity}">
                <toolkit:LineSeries.DataPointStyle>
                    <Style TargetType="toolkit:LineDataPoint">
                        <Setter Property="Background" Value="Lime" />
                        <Setter Property="Template" Value="{x:Null}"/>
                    </Style>
                </toolkit:LineSeries.DataPointStyle>
            </toolkit:LineSeries>
        </toolkit:Chart.Series>
    </toolkit:Chart>

the <Setter Property="Template" Value="{x:Null}"/> removes the actual point, so if you want the point take off that style.

@Vorrtex, your solution seems to over complicate my simple requirements. Not that it's bad, but just not what I was looking, but thank you for taking the time to help.

score 0 · Answer 2 · answered Jun 12 '13 at 22:05

One way is to provide a style that redefines a Palette for the graph:

<Style x:Key="newGraphPalette" TargetType="toolkit:Chart">

  <Setter Property="Palette">
     <Setter.Value>
       <toolkit:ResourceDictionaryCollection>
         <!-- set the first line color to red -->
         <ResourceDictionary>
            <SolidColorBrush x:Key="Background" Color="Red"/>
            <Style x:Key="DataPointStyle" TargetType="Control">
               <Setter Property="Background" Value="StaticResource Background"/>
            </Style>
         </ResourceDictionary>

         <!-- set the second line color to green -->
         <ResourceDictionary>
            <SolidColorBrush x:Key="Background" Color="Green"/>
            <Style x:Key="DataPointStyle" TargetType="Control">
               <Setter Property="Background" Value="StaticResource Background"/>
            </Style>
         </ResourceDictionary>


         <!-- set the third line color to blue -->
         <ResourceDictionary>
            <SolidColorBrush x:Key="Background" Color="Blue"/>
            <Style x:Key="DataPointStyle" TargetType="Control">
               <Setter Property="Background" Value="StaticResource Background"/>
            </Style>
         </ResourceDictionary>
       </toolkit:ResourceDictionaryCollection>
     </Setter.Value>
  </Setter>

</Style>

And when you want to use this particular palette - use the

Style="StaticResource newGraphPalette"

this will over write the default palette of the chart, and you only have to define the colors ones in a resource (style) that can be reused.

Hopefully this is helpful.

How to change the colors of each line in a silverlight 4 chart in xaml

2 Answers2