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

IndexDateTimeAxis solves the challenges of charting for financial applications by:

• Internally handling index-based calculations while allowing the user to work with data values (dates) directly
• Allowing utilizing any DataSeries as a reference scale for all other series, or, optionally, an Array of values
• Allowing VisibleRange to be set using dates rather than indexes
• Enabling Annotations to be placed directly using chart coordinates (date values), eliminating the need for index-based placement
• Handling automatic repositioning of Annotations when changing timeframes (e.g., switching from daily to hourly data)
• Allowing multiple series with different numbers of points. This means Moving Averages no longer require additional NaN values, and indicators such as ZigZag or Oscillators can have more or fewer data points than the main OHLC or Candlestick series without issues

Create and Configure an IndexDateTimeAxis

IndexDateTimeAxis can be created in XAML or in code.

Declaring IndexDateTimeAxis in XAML

        <s:SciChartSurface>
            <!-- ... omitted for brevity -->
            <!--  Create an IndexDateTimeAxis as the XAxis -->
            <s:SciChartSurface.XAxis>
                <s:IndexDateTimeAxis AxisTitle="Time"
                                     AutoRange="Once"
                                     GrowBy="0.0, 0.1"
                                     AxisAlignment="Bottom"
                                     DrawMajorBands="True"
                                     DrawMinorGridLines="False"
                                     DrawMinorTicks="False" />
            </s:SciChartSurface.XAxis>
            <!-- ... omitted for brevity -->
        </s:SciChartSurface>

Creating IndexDateTimeAxis in code

            var sciChartSurface = new SciChartSurface();
            var xAxis = new IndexDateTimeAxis
            {
                AutoRange = AutoRange.Never,
                VisibleRange = new DateRange(DateTime.Now, DateTime.Now.AddDays(10)),
                AxisAlignment = AxisAlignment.Bottom,
                AxisTitle = "Time",
                DrawMajorBands = true,
                DrawMinorGridLines = false,
                DrawMinorTicks = false
            };
            sciChartSurface.XAxis = xAxis;

Create and Configure an IndexDateTimeAxis with MVVM API

IndexDateTimeAxis 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.

    // Create a ViewModel for IndexDateTimeAxis
            var xAxis = new IndexDateTimeAxisViewModel
            {
                AutoRange = AutoRange.Never,
                VisibleRange = new DateRange(DateTime.Now, DateTime.Now.AddDays(10)),
                AxisAlignment = AxisAlignment.Bottom,
                AxisTitle = "Time",
    // Optional Style with more settings
                StyleKey = "IndexDateTimeAxisStyle"
            };
            YAxes.Add(xAxis);

    // Optional explicit Style in XAML with more settings
        <Style x:Key=" IndexDateTimeAxisStyle " TargetType="s:IndexDateTimeAxis">
            <Setter Property="DrawMajorBands" Value="True" />
            <Setter Property="DrawMinorGridLines" Value="False"/>
            <Setter Property="DrawMinorTicks" Value="False"/>
        </Style>

Specifying Base Values (Category Bases)

IndexDateTimeAxis 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, IndexDateTimeAxis is based on X-values of the first DataSeries.

IndexDataProvider can be set in code as follows:

var priceDataSeries = new OhlcDataSeries<DateTime, double>();
var xAxis = new IndexDateTimeAxis
{
         ...,
         IndexDataProvider = new DataSeriesIndexDataProvider(priceDataSeries)
 };

Alternatively, an array with values can be provided:

            var baseXValues = new DateTime[] {...};
            var xAxis = new IndexDateTimeAxis
            {
                ...,
                IndexDataProvider = new ArrayIndexDataProvider<DateTime>(baseXValues)
            };

Finally, the default behavior can be achieved with DefaultDataSeriesIndexDataProvider:

            var xAxis = new IndexDateTimeAxis
            {
                ..., 
                IndexDataProvider = new DefaultDataSeriesIndexDataProvider()
            };

Changing Axis Labels Text Format

Axis label formatting can be customized using the IndexDateTimeAxis API. The most straightforward way is by setting the TextFormatting property, which accepts standard .NET format strings. This property applies the specified formatting to all axis labels. For reference, you can find the supported format string options in the official .NET formatting guide.

Additionally, IndexDateTimeAxis provides a SubDayTextFormatting property, which also accepts a .NET format string. This format is only applied when the axis VisibleRange falls within a sub-day interval, allowing for more granular control of time-based labels.

For more advanced and dynamic formatting, you can use the LabelProvider API. By default, IndexDateTimeAxis uses the SmartDateLabelProvider, which formats labels intelligently based on a VisibleRange. This class supports a variety of configuration options and can adapt to different time scales automatically.

It can be configured as follows:

            var labelProvider = new SmartDateLabelProvider
            {
                ShowWiderDateOnFirstLabel = true,
                ShowYearOnWiderDate = false,
                // specify offset in seconds that is applied to all values
                DateOffset = 60
            };
 
            var xAxis = new IndexDateTimeAxis
            {
                ...,
                LabelProvider = labelProvider
            };

Please note that if either TextFormatting or SubDayTextFormatting is set, these will take precedence and override the default behavior provided by the SmartDateLabelProvider.

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.

        <s:SciChartSurface>
            <!-- ... omitted for brevity -->
            <!--  Create an IndexDateTimeAxis as the XAxis -->
            <!-- MajorDelta is 30 days, MinorDelta is 1 day -->
            <s:SciChartSurface.XAxis>
                <s:IndexDateTimeAxis AutoTicks="False"
                                     MajorDelta="30.00:00:00"
                                     MinorDelta="1.00:00:00" />
            </s:SciChartSurface.XAxis>
            <!-- ... omitted for brevity -->
        </s:SciChartSurface>