SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components


Dear all,

I am using part of your sample where we can select the renderable series through MVVM patterns, This works great but by default I set the style them ExpressionLight for my chart, but I need to overwrite the style for the render series when building them

From your sample code you have the following :

if (type == typeof(LineRenderableSeriesViewModel))
            return new LineRenderableSeriesViewModel { 
                DataSeries = xyDataSeries,
                StyleKey = "LineStyle"

What I try to do is that in ma application resource file I have define a style with a x:key name that I would like to use to represent the line series, like color, strokethickness, dash,…. In the constructor above you expect to get a string key value for StyleKey.

hoy can I pass my own Style resource to LineRenderableSeriesViewModel ?

Thanks for help

  • You must to post comments

You’re mixing a few concepts here.

  1. Theme – is a set of colors applied to a chart

  2. Style – is a WPF Style applied to an element in a chart (which might contain colors, or other property values).

In the MVVM API you apply a stylekey using this technique:

First, declare a style with Key

<UserControl x:Class="WpfApplication3.HelloSciChartWorld"
          d:DesignHeight="400" d:DesignWidth="600">
      <local:HelloSciChartWorldViewModel x:Key="viewModel"/>

      <Style TargetType="s:FastLineRenderableSeries" x:Key="LineSeriesStyle0">
         <Setter Property="StrokeDashArray" Value="5 5"/>
         <Setter Property="StrokeThickness" Value="4"/>
         <Setter Property="Stroke" Value="Orange"/>
         <Setter Property="SelectedSeriesStyle">
               <Style TargetType="s:FastLineRenderableSeries">
                  <Setter Property="StrokeDashArray" Value="5 5"/>
                  <Setter Property="StrokeThickness" Value="3"/>
                  <Setter Property="Stroke" Value="White"/>


   <Grid DataContext="{StaticResource viewModel}">
      <s:SciChartSurface RenderableSeries="{s:SeriesBinding SeriesViewModels}">

            <s:NumericAxis GrowBy="0.1, 0.1"/>


Second, apply the StyleKey via the StyleKey property of RenderableSeriesViewModel

public class HelloSciChartWorldViewModel : INotifyPropertyChanged
       private readonly ObservableCollection<IRenderableSeriesViewModel> _seriesViewModels = new ObservableCollection<IRenderableSeriesViewModel>();

       public event PropertyChangedEventHandler PropertyChanged;

       public HelloSciChartWorldViewModel()
             var xyData = new XyDataSeries<double, double>();
             for (int i = 0; i < 100; i++)
                    xyData.Append(i, Math.Sin(i * 0.2));

             SeriesViewModels.Add(new LineRenderableSeriesViewModel()
                    DataSeries = xyData,       
                    // Set the StyleKey equal to the x:Key in XAML
                    StyleKey = "LineSeriesStyle0"

       public ObservableCollection<IRenderableSeriesViewModel> SeriesViewModels
             get { return _seriesViewModels; }

       protected virtual void OnPropertyChanged(string propertyName)
             var handler = PropertyChanged;
             if (handler != null)
                    handler(this, new PropertyChangedEventArgs(propertyName));

That is it, and it should work if followed correctly.

Best regards,

  • Ryan Franklin
    How do we do this with a SeriesAnimation? Doing the following doesn’t work: ” “
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.