This example demonstrates the CategoryNumericAxis type – a new Category axis which has been added to v4.1 of SciChart WPF, which behaves like a CategoryDateTimeAxis but allows numeric values on the XAxis instead of dates.

Using a simple attached property we are able to change axis type. Take a look at the source-code to see how we do this.

Documentation Links

– Category Axis vs. Value Axis types

// CategoryVsValueAxis.xaml

<UserControl x:Class="SciChart.Examples.Examples.ModifyAxisBehaviour.CategoryVsValueAxis"
             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:ext="http://schemas.abtsoftware.co.uk/scichart/exampleExternals"
             xmlns:local="clr-namespace:SciChart.Examples.Examples.ModifyAxisBehaviour"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
             d:DesignHeight="300"
             d:DesignWidth="300"
             mc:Ignorable="d">

    <UserControl.Resources>
        <DataTemplate x:Key="TooltipTemplate" DataType="s:SeriesInfo">
            <StackPanel Orientation="Vertical">
                <TextBlock Text="{Binding FormattedXValue, StringFormat='{}X: {0}'}" />
                <TextBlock Text="{Binding FormattedYValue, StringFormat='{}Y: {0}'}" />
            </StackPanel>
        </DataTemplate>
    </UserControl.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <ext:SciChartInteractionToolbar TargetSurface="{Binding Source={x:Reference Name=sciChart}}">
            <ToggleButton HorizontalAlignment="Left"
                          Content="Cat"
                          IsChecked="{Binding UseCategoryNumericAxis, Mode=TwoWay}"
                          Style="{StaticResource DefaultToggleButtonStyle}"
                          ToolTipService.ToolTip="X-Axis Category?" />
        </ext:SciChartInteractionToolbar>

        <s:SciChartSurface Name="sciChart"
                           Grid.Column="1"
                           BorderThickness="0"
                           Padding="0"
                           local:SwitchAxisTypeBehavior.UseAlternateXAxis="{Binding UseCategoryNumericAxis}">

            <s:SciChartSurface.RenderableSeries>
                <s:FastLineRenderableSeries DataSeries="{Binding DataSeries}"
                                            Stroke="Green"
                                            s:TooltipModifier.TooltipTemplate="{StaticResource TooltipTemplate}" />
            </s:SciChartSurface.RenderableSeries>

            <local:SwitchAxisTypeBehavior.DefaultXAxis>
                <s:NumericAxis Id="XNumAxis" DrawMajorBands="True" />
            </local:SwitchAxisTypeBehavior.DefaultXAxis>

            <local:SwitchAxisTypeBehavior.AlternativeXAxis>
                <s:CategoryNumericAxis Id="XCatAxis" DrawMajorBands="True" />
            </local:SwitchAxisTypeBehavior.AlternativeXAxis>

            <s:SciChartSurface.YAxis>
                <s:NumericAxis DrawMajorBands="True">
                    <s:NumericAxis.GrowBy>
                        <s:DoubleRange Max="0.1" Min="0.1" />
                    </s:NumericAxis.GrowBy>
                </s:NumericAxis>
            </s:SciChartSurface.YAxis>

            <s:SciChartSurface.ChartModifier>
                <s:ModifierGroup>
                    <s:TooltipModifier ReceiveHandledEvents="True"
                                       ShowTooltipOn="Always"
                                       UseInterpolation="True" />
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>
        </s:SciChartSurface>
    </Grid>
</UserControl>

// CategoryVsValueAxis.xaml.cs

// *************************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2022. All rights reserved.
//  
// Web: http://www.scichart.com
//   Support: support@scichart.com
//   Sales:   sales@scichart.com
// 
// CategoryVsValueAxis.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. 
// *************************************************************************************
namespace SciChart.Examples.Examples.ModifyAxisBehaviour
{
    /// <summary>
    /// Interaction logic for CategoryVsValueAxis.xaml
    /// </summary>
    public partial class CategoryVsValueAxis
    {
        public CategoryVsValueAxis()
        {
            InitializeComponent();
        }
    }
}

// CategoryVsValueAxisViewModel.cs

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

namespace SciChart.Examples.Examples.ModifyAxisBehaviour
{
    public class CategoryVsValueAxisViewModel : BaseViewModel
    {
        private IDataSeries<double, double> _dataSeries;
        private bool _useCategoryNumericAxis;
        
        private readonly double[] _xData = { 1, 1.8, 2.35, 3.4, 4, 12, 12.3, 13.2, 13.5, 14, 20, 20.1, 20.6, 21.5, 22, 23, 24.2, 24.8, 25.15, 25.65, 26 };
        private readonly double[] _yData = { 1, 4, 3.0, 5.2, 2, 2, 1.3, 7, 5.5, 6.3, 6.3, 5.8, 4.1, 5.5, 3, 3, 4.8, 4.1, 6, 5.1, 5.8 };

        public CategoryVsValueAxisViewModel()
        {
            DataSeries = new XyDataSeries<double> {AcceptsUnsortedData = true};
            DataSeries.Append(_xData, _yData);
        }
        
        public IDataSeries<double, double> DataSeries
        {
            get => _dataSeries;
            set
            {
                if (_dataSeries != value)
                {
                    _dataSeries = value;
                    OnPropertyChanged("DataSeries");
                }
            }
        }

        public bool UseCategoryNumericAxis
        {
            get => _useCategoryNumericAxis;
            set
            {
                _useCategoryNumericAxis = value;
                OnPropertyChanged("UseCategoryNumericAxis");
            }
        }
    }
}

// SwitchAxisTypeBehavior.cs

// *************************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2022. All rights reserved.
//  
// Web: http://www.scichart.com
//   Support: support@scichart.com
//   Sales:   sales@scichart.com
// 
// SwitchAxisTypeBehavior.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 SciChart.Charting.Visuals;
using SciChart.Charting.Visuals.Axes;
using SciChart.Core.Extensions;

namespace SciChart.Examples.Examples.ModifyAxisBehaviour
{
    // This is an example class showing how attached properties can be created simply to 
    // change behaviour on a SciChartSurface. This is not part of SciChart API and is not supported
    // but serves as an example only
    public class SwitchAxisTypeBehavior
    {
        // Define the Default XAxis -- this can be done in XAML
        public static readonly DependencyProperty DefaultXAxisProperty = DependencyProperty.RegisterAttached
            ("DefaultXAxis", typeof(AxisBase), typeof(SwitchAxisTypeBehavior), new PropertyMetadata(default(AxisBase), OnXPropertyChanged));

        // Define the Alternative XAxis -- this can be done in XAML
        public static readonly DependencyProperty AlternativeXAxisProperty = DependencyProperty.RegisterAttached
            ("AlternativeXAxis", typeof(AxisBase), typeof(SwitchAxisTypeBehavior), new PropertyMetadata(default(AxisBase), OnXPropertyChanged));

        // Define a boolean attached property which switches between default and alternative XAxis
        public static readonly DependencyProperty UseAlternateXAxisProperty = DependencyProperty.RegisterAttached
            ("UseAlternateXAxis", typeof(bool), typeof(SwitchAxisTypeBehavior), new PropertyMetadata(default(bool), OnXPropertyChanged));

        // Define the Default YAxis -- this can be done in XAML
        public static readonly DependencyProperty DefaultYAxisProperty = DependencyProperty.RegisterAttached
            ("DefaultYAxis", typeof(AxisBase), typeof(SwitchAxisTypeBehavior), new PropertyMetadata(default(AxisBase), OnYPropertyChanged));

        // Define the Alternative YAxis -- this can be done in XAML
        public static readonly DependencyProperty AlternativeYAxisProperty = DependencyProperty.RegisterAttached
            ("AlternativeYAxis", typeof(AxisBase), typeof(SwitchAxisTypeBehavior), new PropertyMetadata(default(AxisBase), OnYPropertyChanged));

        // Define a boolean attached property which switches between default and alternative YAxis
        public static readonly DependencyProperty UseAlternateYAxisProperty = DependencyProperty.RegisterAttached
            ("UseAlternateYAxis", typeof(bool), typeof(SwitchAxisTypeBehavior), new PropertyMetadata(default(bool), OnYPropertyChanged));

        public static void SetDefaultXAxis(DependencyObject element, AxisBase value)
        {
            element.SetValue(DefaultXAxisProperty, value);
        }

        public static AxisBase GetDefaultXAxis(DependencyObject element)
        {
            return (AxisBase) element.GetValue(DefaultXAxisProperty);
        }

        public static void SetAlternativeXAxis(DependencyObject element, AxisBase value)
        {
            element.SetValue(AlternativeXAxisProperty, value);
        }

        public static AxisBase GetAlternativeXAxis(DependencyObject element)
        {
            return (AxisBase) element.GetValue(AlternativeXAxisProperty);
        }

        public static void SetUseAlternateXAxis(DependencyObject element, bool value)
        {
            element.SetValue(UseAlternateXAxisProperty, value);
        }

        public static bool GetUseAlternateXAxis(DependencyObject element)
        {
            return (bool) element.GetValue(UseAlternateXAxisProperty);
        }

        public static void SetDefaultYAxis(DependencyObject element, AxisBase value)
        {
            element.SetValue(DefaultYAxisProperty, value);
        }

        public static AxisBase GetDefaultYAxis(DependencyObject element)
        {
            return (AxisBase) element.GetValue(DefaultYAxisProperty);
        }

        public static void SetAlternativeYAxis(DependencyObject element, AxisBase value)
        {
            element.SetValue(AlternativeYAxisProperty, value);
        }

        public static AxisBase GetAlternativeYAxis(DependencyObject element)
        {
            return (AxisBase) element.GetValue(AlternativeYAxisProperty);
        }

        public static void SetUseAlternateYAxis(DependencyObject element, bool value)
        {
            element.SetValue(UseAlternateYAxisProperty, value);
        }

        public static bool GetUseAlternateYAxis(DependencyObject element)
        {
            return (bool) element.GetValue(UseAlternateYAxisProperty);
        }

        private static void OnXPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            // This is where we switch the axis type depending on boolean
            if (d is SciChartSurface scs)
            {
                bool useAlternateXAxis = GetUseAlternateXAxis(scs);
                scs.XAxis = useAlternateXAxis ? GetAlternativeXAxis(scs) : GetDefaultXAxis(scs);
                scs.RenderableSeries.ForEachDo(s => s.XAxisId = scs.XAxis.Id);
            }
        }

        private static void OnYPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            // This is where we switch the axis type depending on boolean
            if (d is SciChartSurface scs)
            {
                bool useAlternateYAxis = GetUseAlternateYAxis(scs);
                scs.YAxis = useAlternateYAxis ? GetAlternativeYAxis(scs) : GetDefaultYAxis(scs);
                scs.RenderableSeries.ForEachDo(s => s.XAxisId = scs.XAxis.Id);
            }
        }
    }
}

< BACK TO ALL WPF CHART CHART EXAMPLES