SciChart WPF 2D Charts > Axis APIs > Axis Types > IndexNumericAxis
IndexNumericAxis
SciChart v8.7 introduces two new Category Axis types: IndexDateTimeAxis and IndexNumericAxis.

The IndexDateTimeAxis is an advanced hybrid axis type specifically designed for financial stock charts, forex, futures, and cryptocurrency markets. It seamlessly integrates the behaviors of both CategoryDateTimeAxis and DateTimeAxis into a single, more efficient solution, simplifying development and eliminating the need for complex workarounds in trading applications.

IndexNumericAxis functions similarly but supports numeric x-values, allowing for broader use cases beyond time-series data.

Key Features

IndexNumericAxis provides more advanced behaviors, compared to CategoryNumericAxis:

  • Allows smooth scrolling of a chart
  • Internally handling index-based calculations while allowing the user to work with data values directly, instead of indexes
  • Allowing utilizing any DataSeries as a reference scale for all other series, or, optionally, an Array of values
  • Allowing VisibleRange to be set using data values rather than indexes
  • Enabling Annotations to be placed directly using chart coordinates, eliminating the need for index-based placement
  • Allowing multiple series with different numbers of points

Create and Configure an IndexNumericAxis

IndexNumericAxis can be created in XAML or in code.

Declaring IndexNumericAxis in XAML

Declaring an IndexNumericAxis
Copy Code
        <s:SciChartSurface>
            <!-- ... omitted for brevity -->
            <!--  Create an IndexNumericAxis as the XAxis -->
            <s:SciChartSurface.XAxis>
                <s: IndexNumericAxis AxisTitle="Category Axis"
                                     AutoRange="Once"
                                     GrowBy="0.0, 0.1"
                                     TextFormatting = "#0.00"
                                     AxisAlignment="Bottom"
                                     DrawMajorBands="True"
                                     DrawMinorGridLines="False"
                                     DrawMinorTicks="False" />
            </s:SciChartSurface.XAxis>
            <!-- ... omitted for brevity -->
        </s:SciChartSurface>

Creating IndexNumericAxis in code

Declaring an IndexNumericAxis
Copy Code
            var sciChartSurface = new SciChartSurface();
            var xAxis = new IndexNumericAxis
            {
                AutoRange = AutoRange.Never,
                VisibleRange = new DoubleRange(-100.0, 500.0),
                AxisAlignment = AxisAlignment.Bottom,
                AxisTitle = "Category Axis",
                TextFormatting = "#0.##",
                DrawMajorBands = true,
                DrawMinorGridLines = false,
                DrawMinorTicks = false
            };
            sciChartSurface.XAxis = xAxis;

Create and Configure an IndexNumericAxis with MVVM API

IndexNumericAxis can be created with SciChart MVVM API as shown below. More details about SciChart MVVM API can be found in this section of the documentation.

Declaring an IndexNumericAxis with MVVM API
Copy Code
    // Create a ViewModel for IndexNumericAxis
            var xAxis = new IndexNumericAxisViewModel
            {
                AutoRange = AutoRange.Never,
                VisibleRange = new DoubleRange(-100.0, 500.0),
                AxisAlignment = AxisAlignment.Bottom,
                AxisTitle = "Category Axis",
                TextFormatting = "#0.##",
    // Optional Style with more settings
                StyleKey = "IndexNumericAxisStyle"
            };
            YAxes.Add(xAxis);
Declaring a Style for IndexNumericAxis
Copy Code
    // Optional explicit Style in XAML with more settings
        <Style x:Key=" IndexNumericAxisStyle" TargetType="s:IndexNumericAxis">
            <Setter Property="DrawMajorBands" Value="True" />
            <Setter Property="DrawMinorGridLines" Value="False"/>
            <Setter Property="DrawMinorTicks" Value="False"/>
        </Style>

Specifying Base Values (Category Bases)

IndexNumericAxis allows choosing appropriate reference scale for distance measurement with the IndexDataProvider API. It impacts rendering and positioning of axis labels, chart grid, Annotations and RenderableSeries.

You can specify a DataSeries whose X-values will be used as the category base for the axis. Alternatively, you can provide a separate array of values to define the category positions independently.

By default, IndexNumericAxis is based on X-values of the first DataSeries.

IndexDataProvider can be set in code as follows:

Setting IndexDataProvider
Copy Code
var baseDataSeries = new XyDataSeries<double, double>();
var xAxis = new IndexNumericAxis
{
         ...,
         IndexDataProvider = new DataSeriesIndexDataProvider(baseDataSeries)
};

Alternatively, an array with values can be provided:

Providing data array
Copy Code
            var baseXValues = new double[] {...};
            var xAxis = new IndexNumericAxis
            {
                ...,
                IndexDataProvider = new ArrayIndexDataProvider<double>(baseXValues)
            };

Finally, the default behavior can be achieved with DefaultDataSeriesIndexDataProvider:

Applying the default behavior
Copy Code
            var xAxis = new IndexNumericAxis
            {
                ..., 
                IndexDataProvider = new DefaultDataSeriesIndexDataProvider()
            };

Changing Axis Labels Text Format

Text formatting for axis labels can be changed by setting that TextFormatting property to appropriate format string, as shown below. For advanced formatting options, please check out the LabelProvider API.

Text formatting
Copy Code
            var xAxis = new IndexNumericAxis
            {
                ...,
                TextFormatting = "#0.##"
            };

Customizing Axis Scale

Axis scale can be customized with the AxisTicks API. To specify the difference between Major and Minor ticks, AutoTicks must be disabled, and the desired delta values set for MinorDelta and MajorDelta properties, as shown below.

For advanced customization the TickProvider API can be used.

Customizing IndexNumericAxis Scale
Copy Code
<s:SciChartSurface>
            <!-- ... omitted for brevity -->
            <!--  Create an IndexNumericAxis as the XAxis -->
            <!-- MajorDelta is 100, MinorDelta is 10 -->
            <s:SciChartSurface.XAxis>
                                <s: IndexNumericAxis AutoTicks="False" 
                                                     MajorDelta="100"                                     
                                                     MinorDelta="10" />
            </s:SciChartSurface.XAxis>
            <!-- ... omitted for brevity -->
        </s:SciChartSurface>

See Also