SciChart WPF 2D Charts > MVVM API > Worked Example - PointMarkers in MVVM
Worked Example - PointMarkers in MVVM

Worked Example: PointMarkers in MVVM

There are two ways that a point-marker can be added, styled and manipulated in SciChart via MVVM:

  1. You can add a point-marker to the RenderableSeriesViewmodel.PointMarker property
  2. You can add a Point-Marker to the style assigned to the RenderableSeries

View (XAML)

PointMarkers in MVVM
Copy Code
<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="2"/>
            <Setter Property="Stroke" Value="Orange"/>
            <Setter Property="PointMarkerTemplate">
                        <s:EllipsePointMarker Width="5" Height="5"/>

    <Grid DataContext="{StaticResource viewModel}">

        <s:SciChartSurface RenderableSeries="{s:SeriesBinding SeriesViewModels}">

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



PointMarkers in MVVM
Copy Code
public class HelloSciChartWorldViewModel : INotifyPropertyChanged
    private readonly ObservableCollection<IRenderableSeriesViewModel> _seriesViewModels = new ObservableCollection<IRenderableSeriesViewModel>();
    private readonly XyDataSeries<double, double> _xyData = new XyDataSeries<double, double>();

    public event PropertyChangedEventHandler PropertyChanged;

    public HelloSciChartWorldViewModel()
        for (int i = 0; i < 100; i++)
            _xyData.Append(i, Math.Sin(i * 0.2));

        SeriesViewModels.Add(new LineRenderableSeriesViewModel() { DataSeries = _xyData, 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));

Alternative ViewModel – add PointMarker to RenderableSeriesViewModel

Alternatively, simply add a PointMarker to the RenderableSeriesViewModel as follows:

Alternative ViewModel – add PointMarker to RenderableSeriesViewModel
Copy Code
SeriesViewModels.Add(new LineRenderableSeriesViewModel()
   DataSeries = _xyData,
   StyleKey = "LineSeriesStyle0" ,
   PointMarker = new EllipsePointMarker() { Width = 5, Height = 5},