WPF Chart - Examples
SciChart WPF ships with hundreds of WPF Chart Examples which you can browse, play with, view the source-code and even export each WPF Chart Example to a stand-alone Visual Studio solution. All of this is possible with the new and improved SciChart WPF Examples Suite, which ships as part of the SciChart WPF SDK.
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
The C#/WPF source code for the WPF Chart Secondary Y-Axis example is included below (Scroll down!).
Did you know you can also view the source code from one of the following sources as well?
- Clone the SciChart.WPF.Examples from Github.
- Or, view source in the SciChart WPF Examples suite.
- Also the SciChart WPF Trial contains the full source for the examples (link below).
LeftRightYAxes.xaml
View source code<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
View source code// *************************************************************************************
// 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();
}
}
}
