SciChart WPF 2D Charts > Tutorials > Code-Behind > Tutorial 03 - Adding Series to a Chart
Tutorial 03 - Adding Series to a Chart

Adding Series to a SciChartSurface

Source code for this tutorial can be found at our SciChart.WPF.Examples Github Repository under Tutorials section.
Following on from Tutorial 02 - Creating a SciChartSurface where we created the chart control, added an XAxis and a YAxis, we will now add a some Series with some data to the chart.

Declaring a RenderableSeries in XAML

To draw a Line and Scatter series on the chart, we need to define two RenderableSeries, and two DataSeries to hold the data.

First, lets declare the RenderableSeries in XAML:

Adding Series to the Chart
Copy Code
<Window x:Class="SciChart.Tutorial.MainWindow"
        Title="MainWindow" Height="350" Width="525">
        <s:SciChartSurface x:Name="sciChartSurface">
            <!--  Define RenderableSeries  -->
            <!-- where xmlns:s="" -->
                <s:FastLineRenderableSeries x:Name="LineSeries" Stroke="#FF4083B7"/>
                <s:XyScatterRenderableSeries x:Name="ScatterSeries" >
                        <s:EllipsePointMarker Width="7" Height="7" Fill="#FFF" Stroke="SteelBlue"/>
                <s:NumericAxis AxisTitle="Number of Samples (per Series)"/>
                <s:NumericAxis AxisTitle="Value"/>
                    <s:RubberBandXyZoomModifier />
                    <s:ZoomExtentsModifier />
                <s:TextAnnotation Text="Hello world!" X1="5.0" Y1="5"/>

For these series to show, we need to add some data to the chart. We're going to do this in code-behind.

Create Data for the Charts
Copy Code
using System;
using System.Windows;
using SciChart.Charting.Model.DataSeries;
namespace SciChart.Tutorial
    public partial class MainWindow : Window
        public MainWindow()
            this.Loaded += OnLoaded;
        private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
            // Create XyDataSeries to host data for our charts
            var scatterData = new XyDataSeries<double, double>();
            var lineData = new XyDataSeries<double, double>();
            for (int i = 0; i < 1000; i++)
                lineData.Append(i, Math.Sin(i * 0.1));
                scatterData.Append(i, Math.Cos(i * 0.1));
            // Assign dataseries to RenderSeries
            LineSeries.DataSeries = lineData;
            ScatterSeries.DataSeries = scatterData;

Congratulations! You now have added some series to a chart!

Further Reading

Each series type deserves an article in itself! For further reading, please see the articles below:

  1. FastLineRenderableSeries - The Line Series Type
  2. XyScatterRenderableSeries - The Scatter Series Type
  3. PointMarker API - adding data point markers
See Also