Configuring Axis Intervals (igDataChart)

Topic Overview

Purpose

This topic provides information on configuring the major and minor axis intervals on the igDataChart™ control.

Required background

The following topic is a prerequisite to understanding this topic:

Adding igDataChart

This topic demonstrates how to add the igDataChart™ control to a page and bind it to data.

In this topic

This topic contains the following sections:

Axis Intervals

Overview

The Major and Minor intervals feature of the igDataChart control allows you to apply intervals with the specified color and thickness to the x and y axes of the igDataChart control.

Preview

The following example is configurable igDataChart control, using NumericX and Y axes, where the following options can be set - Interval, MinorInterval, MajorStroke and MinorStroke.

NumericXAxis Intervals

Axis major and minor intervals are implemented by setting the Interval and MinorInterval properties on an axis to a value greater than zero. In order to display minor gridlines that correspond to minor interval, one needs to set MinorStroke and MinorStrokeThickness properties on the axis, (as minor gridlines do not have a default color or thickness, and they will not be displayed without first assigning them).

Properties

The following table summarizes the properties available for configuring the major and minor axis intervals

Property Name	Property Type	Description
Interval	double	This value provides adequate spacing for axis labels and major gridlines, if used. Note that the interval for axis labels will also be set by this value, displaying one label at the point on the axis associated with the interval. On category axes, this value is represented as index between first item and last category item. Generally, this value should equal to 10-20% of total numbers of category items so that all axis labels fit on axis so that they are not clipped by other axis labels. On numeric axes, this value is represented as double between axis minimum value and axis maximum value. By default, numeric axes will automatically calculate and find a nice and round interval based on axis minimum values and maximum value. On date time axes, this value is represented as time span between axis minimum value and axis maximum value.
MajorStroke	brush	A color of axis major gridlines.
MajorStrokeThickness	double	A thickness in pixels of the axis major gridlines set as a double value
MinorInterval	double	This value provides adequate spacing for minor gridlines, which are always rendered between major gridlines. As result, a value of MinorInterval property should always be much smaller (usually 2-5 time smaller) than the value of major Interval property of an axis. On category axes, this value is represented as fraction of major Interval property. Generally, this value should equal to between 0.25 and 0.5 On numeric axes, this value is represented as double between axis minimum value and axis maximum value. By default, numeric axes will not automatically calculate minor interval based on axis minimum values and maximum value. On date time axes, this value is represented as time span between axis minimum value and axis maximum value.
MinorStroke	brush	A color of axis minor gridlines.
MinorStrokeThickness	double	A thickness in pixels of the axis minor gridlines set as a double value.

NumericXExample

The screenshot, following the table, illustrates how the igDataChart control with the axis major and minor interval properties configured on the NumericXAxis will be displayed as a result of the following settings, (using the LineSeries):

Property	Value
MinorInterval	2
MinorStroke	"Red"
MinorStrokeThickness	1
Interval	10
MajorStroke	“Green”
MajorStrokeThickness	2

Following is the code that implements this example:

In JavaScript:

$("#container").igDataChart({
    …
    axes: [{
                    name: "xAxis",
                    type: "numericX",
                    title: "Year",
                    majorStroke: "Green",
                    minorStroke: 'Red',
                    minorInterval: 2,
                    interval: 10,
                    majorStrokeThickness: 2,

                }, …

NumericYExample

The screenshot, following the table, illustrates how the igDataChart control with the axis major and minor interval properties configured on the NumericYAxis will be displayed as a result of the following settings, (using the LineSeries):

Property	Value
MinorInterval	5000
MinorStroke	"Red"
MinorStrokeThickness	1
Interval	10000
MajorStroke	“Green”
MajorStrokeThickness	2