Scatter chart series with different colors

Hi all,

Is it possible to coloring dynamically a serie on a scatter chart? I have the following code to add a serie dynamically:

public void AddSerie(Chart chart, List xAxis, List yAxis) { IList points = new List

Hello Raphaela

You can set the color of each series by setting the SeriesBrush property on each ScatterSeries instance. For example, in your code sample you could include item.SeriesBrush = Brushes.Red; (Of course you'll actually want to pass in the brush as a parameter to your method). The SeriesBrush is applied to all points in a single series.

Note: if you have custom scatter point styles, or would like to have custom scatter point styles at some stage, you can use the SeriesBrush property within the style by using a TemplateBinding to the Background property. (The Background property of each ChartSymbol gets set to be the SeriesBrush internally). Here is an example of using the SeriesBrush (via the Background property) within a simple custom scatter point style:

<Style x:Key="RoundChartSymbolStyle" TargetType="ms:ChartSymbol">
  <Setter Property="Margin" Value="-4,-4,4,4" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
        <Ellipse Width="8" Height="8" Fill="{TemplateBinding Background}" />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Let me know if you have further questions about this.

Jason Fauchelle

Hi Jason !

It works fine ! Thanks !

Now I have two more questions for you. Considering the same dynamic serie, I would like to set more two properties: SymbolStyle and ToolTipBinding. For the SymbolStyle, I made a Style like this below:

    <Style x:Key="RingChartSymbolStyle" TargetType="ms:DataPoint" BasedOn="{StaticResource SymbolStyleBase}">
        <Setter Property="Tag">
            <Setter.Value>
                <PathGeometry Figures="M 0.5 0 A 0.5 0.5 180 0 1 0.5 1 A 0.5 0.5 180 0 1 0.5 0 L 0.5 0.25 A 0.25 0.25 180 0 1 0.5 0.75 A 0.25 0.25 180 0 1 0.5 0.25 Z" />
            </Setter.Value>
        </Setter>
    </Style>

In my XAML, I can do something like this for both properties:

ms:ScatterSeries SymbolStyle="{StaticResource RingChartSymbolStyle}" ToolTipBinding="{Binding}"

But how can I do it in code behind (C#)?

Best regards, Raphaela.

Hello Raphaela

To set the symbol style, this depends on how you get the style itself. If the style is still going to be defined in XAML, then in code-behind, you'll need to get the ResourceDictionary that contains the style and get the style from there. You can use the index operator on a ResourceDictionary and use the style name. e.g. Style s = rd["RingChartSymbolStyle"] as Style; (where rd is the ResourceDictionary instance). The other option is to also build the style in code. You can create a new Style and set its target type to ChartSymbol. Then you can added Setter instances to it. If you need to set the Template, you'd need to create a FrameworkElementFactory.

For the binding, you should just be able to set the ToolTipBinding property to be a new Binding().

That said, it is recommend that you keep the code-behind clean of visual elements as much as possible. It is best to set up all visual elements in xaml where possible, and only have model objects in C#. If you could describe what you want to do, I may be able to recommend a way to keep the styling code in xaml. For example, if you want a way to switch between chart symbols, you could expose a property in code-behind that is either an enum or a string that specifies which symbol to use. In the xaml for the series, you could set the Symbol style to be a binding to that property, and use an IValueConverter to take the enum or string and determine which Style instance to use.

Jason Fauchelle

Hello, sorry to bother you but i was wondering if you could post the full XAML code because i have just started coding in visual studio and i have been stuck on styling my data series for a scatter chart for 2 days now and your post is probably one of the few post that i was able to find that is relative to my problem. I am not sure where to place the styling code example in my XAML code in order to get my scatter series to be a certain color. Thank you, and sorry for bothering.

Hello

In order to change the color of the scatter series, all you need to do is set the SeriesBrush property of the ScatterSeries. For example:

<ms:Chart>
  <ms:ScatterSeries SeriesBrush="#3333DD" />
</ms:Chart>

If you also need to provide a custom scatter series symbol style, you'll want to add the sample style code to a xaml resource dictionary. The easiest way to do this is add it to the resource dictionary of the window, page or user control that contains the Chart control. For example if you are working with a Window, you'd do something like this within the Window tag at the top of the xaml file:

<Window.Resources>
  <ResourceDictionary>

    <!-- styling code goes here -->

  </ResourceDictionary>
</Window.Resources>

Then you set the SymbolStyle of the ScatterSeries to use the style you added to the resource dictionary, like this:

<ms:Chart>
  <ms:ScatterSeries SeriesBrush="#3333DD" SymbolStyle="{StaticResource RoundChartSymbolStyle}" />
</ms:Chart>

Let me know if you have further questions about our WPF Elements Chart control, or attach a sample project to a forum post and I'll help you out with it.

-Jason Fauchelle

Still wont seem to work, i tried copying and paste your code to and i still get errors. Just wanted to clarify that i am creating a WPF C# Application, and i am wondering if it is the project type that is causing all the errors that i have run into with charting class. Thank You again for responding to my previous question.

THE FOLLOWING ERRORS ARE WHAT I HAVE GOTTEN: 1. PROPERTIES SERIES BRUSH WAS NOT FOUND IN TYPE SCATTER SERIES 2. THE TYPE SCATTER SERIES DOES NOT SUPPORT DIRECT CONTACT

CODE SAMPLE BELOW:

 <StackPanel Height="291" HorizontalAlignment="Left" Margin="996,313,0,0" Name="stackPanel3" VerticalAlignment="Top" Width="356" Background="#FF333333">
        <Label Background="#FF515151" BorderBrush="White" BorderThickness="0" Content="Chart" FontSize="17" Foreground="White" Height="33" Name="label11" />
        <chartingToolkit:Chart DataContext="1,10 2,20 3,30 4,40" Name="chart1" Title="Chart Title" IsEnabled="False">
            <chartingToolkit:ScatterSeries x:Name="Series1" Title="Test" IndependentValueBinding="{Binding Path=LOCALMESSAGETIME}" DependentValueBinding="{Binding Path=Duration}" Foreground="#FFFB2423" DataContext="{Binding Path=Length}" Background="#FF002EFF">

                <chartingToolkit:Chart>
                    <chartingToolkit:ScatterSeries SeriesBrush="#3333DD" />
                </chartingToolkit:Chart>

            </chartingToolkit:ScatterSeries>
        </chartingToolkit:Chart>



    </StackPanel>

Hello

Sorry, it looks like you aren't using our WPF Elements product which means I don't know the answer to your questions. You will either need to download a 60 day free trial of WPF Elements, or look for a forum or documentation related to ChartingToolkit. Though if it is from codeproject, I'm not sure if or where such forum would be.

-Jason Fauchelle