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