Demonstrates how to use the FastLineRenderableSeries and the Data-Point Markers API to apply fast bitmap-rendered data point markers to a line series.

The Point-markers are created using FrameworkElements, but applied to the line as a bitmap, so it’s possible to render tens or hundreds of thousands of point-markers using this method.

Documentation Links

– Data-Point Markers API
– FastLineRenderableSeries Type
– XyDataSeries Type
– RenderableSeries API

// DatapointMarkersView.xaml

<UserControl x:Class="SciChart.Examples.Examples.AnnotateAChart.DatapointMarkersView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:sciChart="http://schemas.abtsoftware.co.uk/scichart"
             xmlns:ext="http://schemas.abtsoftware.co.uk/scichart/exampleExternals"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             d:DesignHeight="400"
             d:DesignWidth="600"
             mc:Ignorable="d">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!-- The SciChartInteractionToolbar adds zoom, pan, zoom extents and rotate functionality -->
        <!-- to the chart and is included for example purposes. -->
        <!-- If you wish to know how to zoom and pan a chart then do a search for Zoom Pan in the Examples suite! -->
        <ext:SciChartInteractionToolbar TargetSurface="{Binding Source={x:Reference Name=sciChart}}" />

        <sciChart:SciChartSurface x:Name="sciChart" Grid.Column="1" Padding="0" BorderThickness="0">

            <!--  Declare Axes  -->
            <sciChart:SciChartSurface.XAxis>
                <sciChart:NumericAxis DrawMajorBands="True" GrowBy="0.1, 0.1"/>
            </sciChart:SciChartSurface.XAxis>

            <sciChart:SciChartSurface.YAxis>
                <sciChart:NumericAxis DrawMajorBands="True" GrowBy="0.2, 0.2"/>
            </sciChart:SciChartSurface.YAxis>

            <!--  Declare RenderableSeries  -->
            <sciChart:SciChartSurface.RenderableSeries>

                <!--  Declare first line series with a PointMarker control template  -->
                <sciChart:FastLineRenderableSeries Stroke="DarkSlateGray">
                    <sciChart:FastLineRenderableSeries.PointMarker>
                        <sciChart:EllipsePointMarker Width="7" Height="7" Fill="Lavender"/>
                    </sciChart:FastLineRenderableSeries.PointMarker>
                </sciChart:FastLineRenderableSeries>

                <!--  Declare second line series with a PointMarker control template  -->
                <sciChart:FastLineRenderableSeries Stroke="RosyBrown">
                    <sciChart:FastLineRenderableSeries.PointMarker>
                        <sciChart:EllipsePointMarker Width="7" Height="7" Fill="Lavender"/>
                    </sciChart:FastLineRenderableSeries.PointMarker>
                </sciChart:FastLineRenderableSeries>

            </sciChart:SciChartSurface.RenderableSeries>

        </sciChart:SciChartSurface>
    </Grid>
</UserControl>

// DatapointMarkersView.xaml.cs

// *************************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2021. All rights reserved.
//  
// Web: http://www.scichart.com
//   Support: support@scichart.com
//   Sales:   sales@scichart.com
// 
// DatapointMarkersView.xaml.cs is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use. 
// 
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied. 
// *************************************************************************************
using System;
using System.Windows;
using System.Windows.Controls;
using SciChart.Charting.Model.DataSeries;
using SciChart.Data.Model;

namespace SciChart.Examples.Examples.AnnotateAChart
{
    public partial class DatapointMarkersView : UserControl
    {
        public DatapointMarkersView()
        {
            InitializeComponent();
            Loaded += DatapointMarkersViewLoaded;
        }

        private void DatapointMarkersViewLoaded(object sender, RoutedEventArgs e)
        {
            var seriesA = new XyDataSeries<double, double>();
            var seriesB = new XyDataSeries<double, double>();
            seriesA.SeriesName = "Sinewave A";
            seriesB.SeriesName = "Sinewave B";

            double count = 100.0;
            double k = 2 * Math.PI / 30.0;
            for (int i = 0; i < (int)count; i++)
            {
                var phi = k * i;
                seriesA.Append(i, (1.0 + i / count) * Math.Sin(phi));
                seriesB.Append(i, (0.5 + i / count) * Math.Sin(phi));
            }

            sciChart.RenderableSeries[0].DataSeries = seriesA;
            sciChart.RenderableSeries[1].DataSeries = seriesB;
        }
    }
}

< BACK TO ALL WPF CHART CHART EXAMPLES