A static example which demonstrates a line chart with two series and primary and secondary Y-Axis. SciChart supports unlimited left and right Y-Axes and this example shows in a simple way how to register a line series on each axis.

Also see the Drag Area to Zoom, Drag Axis to Scale examples to show how to add interactivity to a dual-axis application.

Tip!

The properties NumericAxis.AxisAlignment, NumericAxis.Id and FastLineRenderableSeries.YAxisId / FastLineRenderableSeries.XAxisId show how to align axes and assign series to them.

Documentation Links

– Tutorial: Creating a chart with multiple Axis

// LeftRightYAxes.xaml

<UserControl x:Class="SciChart.Examples.Examples.ModifyAxisBehaviour.LeftRightYAxes"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:s="http://schemas.abtsoftware.co.uk/scichart" 
             Loaded="LeftRightAxesView_OnLoaded"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:ext="http://schemas.abtsoftware.co.uk/scichart/exampleExternals"             
             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}}" />

        <!-- Create the chart surface -->
        <s:SciChartSurface Name="sciChart" Grid.Column="1">

            <!-- Declare RenderableSeries -->
            <s:SciChartSurface.RenderableSeries>
                <s:FastLineRenderableSeries x:Name="lineSeriesRight" Stroke="#FF279B27" StrokeThickness="2" YAxisId="RightAxis">
                    <s:FastLineRenderableSeries.SeriesAnimation>
                        <s:WaveAnimation AnimationDelay="0:0:1" Duration="0:0:3"/>
                    </s:FastLineRenderableSeries.SeriesAnimation>
                </s:FastLineRenderableSeries>
                <s:FastLineRenderableSeries x:Name="lineSeriesLeft" Stroke="#FF4083B7" StrokeThickness="2" YAxisId="LeftAxis">
                    <s:FastLineRenderableSeries.SeriesAnimation>
                        <s:WaveAnimation AnimationDelay="0:0:1" Duration="0:0:3"/>
                    </s:FastLineRenderableSeries.SeriesAnimation>
                </s:FastLineRenderableSeries>
            </s:SciChartSurface.RenderableSeries>

            <!-- Create an X Axis -->
            <s:SciChartSurface.XAxis>
                <s:NumericAxis GrowBy="0.1, 0.1"/>
            </s:SciChartSurface.XAxis>

            <!-- Create Y Axes on the Left and Right -->
            <s:SciChartSurface.YAxes>
                <s:NumericAxis TickTextBrush="#FF279B27" Id="RightAxis" AxisAlignment="Right" GrowBy="0.1, 0.1" />
                <s:NumericAxis TickTextBrush="#FF4083B7" Id="LeftAxis" AxisAlignment="Left" GrowBy="0.1, 0.1" />
            </s:SciChartSurface.YAxes>

        </s:SciChartSurface>
    </Grid>
</UserControl>

// LeftRightYAxes.xaml.cs

// *************************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2022. All rights reserved.
//  
// Web: http://www.scichart.com
//   Support: support@scichart.com
//   Sales:   sales@scichart.com
// 
// LeftRightYAxes.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.Windows;
using System.Windows.Controls;
using SciChart.Charting.Model.DataSeries;
using SciChart.Examples.ExternalDependencies.Data;

namespace SciChart.Examples.Examples.ModifyAxisBehaviour
{
    public partial class LeftRightYAxes : UserControl
    {
        public LeftRightYAxes()
        {
            InitializeComponent();
        }

        private void LeftRightAxesView_OnLoaded(object sender, RoutedEventArgs e)
        {
            // Add two data series. These are bound 1:1 to renderableSeries
            var leftDataSeries = new UniformXyDataSeries<double>(0d, 0.002);
            var rightDataSeries = new UniformXyDataSeries<double>(0d, 0.002);

            // Get some data
            var data1 = DataManager.Instance.GetFourierYData(1.0, 0.1);
            var data2 = DataManager.Instance.GetDampedSinewaveYData(3.0, 0.005, data1.Length);

            // Append data to series
            leftDataSeries.Append(data1);
            rightDataSeries.Append(data2);

            // Assign DataSeries to RenderableSeries
            // Note, you can also bind these as RenderableSeries.DataSeries is a DependencyProperty
            lineSeriesLeft.DataSeries = leftDataSeries;
            lineSeriesRight.DataSeries = rightDataSeries;

            sciChart.ZoomExtents();
        }
    }
}

< BACK TO ALL WPF CHART CHART EXAMPLES