Demonstrates how to place X and Y Axes at the Center of the SciChartSurface using our ShiftedAxesBehavior.

ShiftedAxesBehavior allows to place Axis centrally which is common in Oscilloscope and VDU displays.

Documentation Links

– Creating a Chart with Center Axis

// ShiftedAxes.xaml

<UserControl x:Class="SciChart.Examples.Examples.ModifyAxisBehaviour.ShiftedAxes.ShiftedAxes"
             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:i="http://schemas.microsoft.com/xaml/behaviors"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
             xmlns:shiftedAxes="clr-namespace:SciChart.Examples.Examples.ModifyAxisBehaviour.ShiftedAxes"             
             Loaded="ShiftedAxes_OnLoaded"
             d:DesignHeight="400"
             d:DesignWidth="600"
             mc:Ignorable="d">

    <UserControl.Resources>

        <ItemsPanelTemplate x:Key="template">
            <Canvas s:ClipToBoundsHelper.ClipToBounds="True" />
        </ItemsPanelTemplate>

        <Style TargetType="s:NumericAxis">
            <Setter Property="GrowBy" Value="0.1, 0.1" />
            <Setter Property="TextFormatting" Value="0.00;0.00; " />
            <Setter Property="BorderBrush" Value="#FFFFFFFF" />
            <Setter Property="MajorTickLineStyle">
                <Setter.Value>
                    <Style TargetType="Line">
                        <Setter Property="Stroke" Value="#FFFFFFFF" />
                        <Setter Property="StrokeThickness" Value="2" />
                        <Setter Property="StrokeEndLineCap" Value="Square" />
                        <Setter Property="X2" Value="6" />
                        <Setter Property="Y2" Value="6" />
                    </Style>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--  Create the chart surface  -->
        <s:SciChartSurface x:Name="sciChart"
                           Grid.Row="1"
                           CenterXAxesPanelTemplate="{StaticResource template}"
                           CenterYAxesPanelTemplate="{StaticResource template}">
            <i:Interaction.Behaviors>
                <shiftedAxes:ShiftedAxesBehavior XAxisPosition="0"
                                               XMode="Absolute"
                                               YAxisPosition="0"
                                               YMode="Absolute" />
            </i:Interaction.Behaviors>

            <!--  Declare RenderableSeries  -->
            <s:SciChartSurface.RenderableSeries>
                <s:FastLineRenderableSeries x:Name="lineRenderSeries" StrokeThickness="1">
                    <s:FastLineRenderableSeries.SeriesAnimation>
                        <s:WaveAnimation AnimationDelay="0:0:1" Duration="0:0:3" PointDurationFraction="0.4"/>
                    </s:FastLineRenderableSeries.SeriesAnimation>
                </s:FastLineRenderableSeries>
            </s:SciChartSurface.RenderableSeries>

            <!--  Create an X Axis with Growby  -->
            <s:SciChartSurface.XAxis>
                <s:NumericAxis MinHeight="40"
                               BorderThickness="0,2,0,0"
                               IsCenterAxis="True" />
            </s:SciChartSurface.XAxis>

            <!--  Create a Y Axis with Growby. Optional bands give a cool look and feel for minimal performance impact  -->
            <s:SciChartSurface.YAxis>
                <s:NumericAxis MinWidth="40"
                               BorderThickness="2,0,0,0"
                               IsCenterAxis="True" />
            </s:SciChartSurface.YAxis>

            <s:SciChartSurface.ChartModifier>
                <s:ModifierGroup>
                    <s:ZoomExtentsModifier />
                    <s:MouseWheelZoomModifier />
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>
        </s:SciChartSurface>
    </Grid>
</UserControl>

// ShiftedAxes.xaml.cs

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

namespace SciChart.Examples.Examples.ModifyAxisBehaviour.ShiftedAxes
{
    public partial class ShiftedAxes
    {
        public ShiftedAxes()
        {
            InitializeComponent();
        }

        private void ShiftedAxes_OnLoaded(object sender, RoutedEventArgs e)
        {
            using (sciChart.SuspendUpdates())
            {
                var dataSeries = new XyDataSeries<double, double> {AcceptsUnsortedData = true};
                lineRenderSeries.DataSeries = dataSeries;

                var data = DataManager.Instance.GetButterflyCurve(20000);
                dataSeries.Append(data.XData, data.YData);
            }
            
            // To provide correct appearance of chart in Silverlight
            // we use Dispatcher to delay ZoomExtents call on chart
            Dispatcher.BeginInvoke(new Action(() => sciChart.ZoomExtents()));
        }
    }
}

// ShiftedAxesBehavior.cs

// *************************************************************************************
// SCICHART Copyright SciChart Ltd. 2011-2022. All rights reserved.
//  
// Web: http://www.scichart.com
//   Support: support@scichart.com
//   Sales:   sales@scichart.com
// 
// ShiftedAxesBehavior.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.Linq;
using System.Windows.Controls;
using Microsoft.Xaml.Behaviors;
using SciChart.Charting.Visuals;
using SciChart.Charting.Visuals.Axes;

namespace SciChart.Examples.Examples.ModifyAxisBehaviour.ShiftedAxes
{
    public enum ShiftingMode
    {
        Absolute,
        Relative
    }

    /* NOTE:
     * We use Microsoft.Xaml.Behaviors.Behavior as a base class for this behaviour. We have embedded the source for
     * MS Behaviours in our SciChart.Examples.ExternalDependencies DLL for example purposes only and for compatibility with 
     * WPF and .NET Core
     *
     * What you should do is reference either System.Windows.Interactivity or Microsoft.Xaml.Behaviors.Wpf from NuGet
     * as it is not recommended to reference SciChart.Examples.ExternalDependencies in your applications 
     */
    public class ShiftedAxesBehavior : Behavior<SciChartSurface>
    {
        public ShiftingMode XMode { get; set; }
        public ShiftingMode YMode { get; set; }
        
        public double XAxisPosition { get; set; } 
        public double YAxisPosition { get; set; } 

        protected override void OnAttached()
        {
            base.OnAttached();

            AssociatedObject.Rendered += SciChart_OnRendered;
        }


        protected override void OnDetaching()
        {
            base.OnDetaching();

            AssociatedObject.Rendered -= SciChart_OnRendered;
        }

        private void SciChart_OnRendered(object sender, EventArgs eventArgs)
        {
            var xAxis = AssociatedObject.XAxes.FirstOrDefault() as AxisBase;
            var yAxis = AssociatedObject.YAxes.FirstOrDefault() as AxisBase;

            if (xAxis == null || yAxis == null) return;

            if (xAxis.IsCenterAxis)
                xAxis.Width = AssociatedObject.RenderSurface.ActualWidth;            
            if (yAxis.IsCenterAxis)
                yAxis.Height = AssociatedObject.RenderSurface.ActualHeight;

            using (AssociatedObject.SuspendUpdates())
            {
                var yCoordCalc = yAxis.GetCurrentCoordinateCalculator();
                var xCoordCalc = xAxis.GetCurrentCoordinateCalculator();

                if (yCoordCalc != null && xAxis.IsCenterAxis)
                {
                    var xAxisPos = XMode == ShiftingMode.Absolute
                        ? yCoordCalc.GetCoordinate(XAxisPosition)
                        : yAxis.Height*XAxisPosition;

                    Canvas.SetTop(xAxis, xAxisPos);
                    Canvas.SetLeft(xAxis, 0);
                }
                
                if (xCoordCalc != null && yAxis.IsCenterAxis)
                {
                    var yAxisPos = YMode == ShiftingMode.Absolute
                        ? xCoordCalc.GetCoordinate(YAxisPosition)
                        : xAxis.Width*YAxisPosition;

                    Canvas.SetTop(yAxis, 0);
                    Canvas.SetLeft(yAxis, yAxisPos);
                }
            }
        }
    }
}

< BACK TO ALL WPF CHART CHART EXAMPLES