WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 2D Charts > Tutorials > Code-Behind > Tutorial 02 - Creating a SciChartSurface
Tutorial 02 - Creating a SciChartSurface

The SciChartSurface Type

The root 2D chart control is called the SciChartSurface. This is the WPF Control you will be adding to your applications wherever you need a chart. You can add more than one SciChartSurface, you can configure them independently, and you can link them together.

Source code for this tutorial can be found at our SciChart.WPF.Examples Github Repository under Tutorials section.

First up, let’s start by declaring one:

Declaring a SciChartSurface Instance

After Referencing the SciChart DLLs from NuGet (package=SciChart), from local DLL files (referencing DLLs SciChart.Charting, SciChart.Drawing, SciChart.Data, SciChart.Core) or the SciChart Source from Github, a SciChartSurface instance can be declared as follows:

XAML

Declaring a SciChartSurface Instance
Copy Code 
<Window x:Class="SciChart.Tutorial.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <!--  Create the chart surface  -->
        <!-- where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" -->
        <s:SciChartSurface x:Name="sciChartSurface">
            <!--  Create an X Axis  -->
            <s:SciChartSurface.XAxis>
                <s:NumericAxis AxisTitle="Number of Samples (per Series)"/>
            </s:SciChartSurface.XAxis>
            <!--  Create a Y Axis  -->
            <s:SciChartSurface.YAxis>
                <s:NumericAxis AxisTitle="Value"/>
            </s:SciChartSurface.YAxis>
            <!--  Specify interactivity modifiers  -->
            <s:SciChartSurface.ChartModifier>
                <s:ModifierGroup>
                    <s:RubberBandXyZoomModifier />
                    <s:ZoomExtentsModifier />
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>
            <!-- Add annotations hints to the user -->
            <s:SciChartSurface.Annotations>
                <s:TextAnnotation Text="Hello world!" X1="5.0" Y1="5.0"/>
            </s:SciChartSurface.Annotations>
        </s:SciChartSurface>
    </Grid>
</Window>

Code

Alternative C# code to declare a SciChartSurface is below:

Declaring a SciChartSurface Instance
Copy Code 
// Create the chart surface
var sciChartSurface = new SciChartSurface();

// Create the X and Y Axis
var xAxis = new NumericAxis() { AxisTitle = "Number of Samples (per series)"};
var yAxis = new NumericAxis() { AxisTitle = "Value"};

sciChartSurface.XAxis = xAxis;
sciChartSurface.YAxis = yAxis;

// Specify Interactivity Modifiers
sciChartSurface.ChartModifier = new ModifierGroup(new RubberBandXyZoomModifier(), new ZoomExtentsModifier());
// Add annotation hints to the user
var textAnnotation = new TextAnnotation()
{
   Text = "Hello World!",
   X1=5.0,
   Y1=5.0
};
sciChartSurface.Annotations.Add(textAnnotation);

The above code declares a SciChartSurface, adds a (numeric) X and Y Axis, adds a single text annotation and two zoom behaviours. If you declared it in XAML, you should be able to see it in the WPF Designer.

 

Congratulations, you have just created your first SciChartSurface!