Version

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:

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.

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

Following is the code that implements this example:

In JavaScript:

$("#container").igDataChart({
    …
    axes: [{
            name: "yAxis",
                    type: "numericY",
                    majorStroke: "Green",
                    minorStroke: 'Red',
                    minorInterval: 5000,
                    interval: 10000,
                    }, …

CategoryXExample

This sample illustrates how the igDataChart control, with the axis major and minor interval properties configured on the CategoryXAxis, will be displayed as a result of the usage of the following settings - MinorInterval, MinorStroke, MinorStrokeThickness, Interval, MajorStroke and MajorStrokeThickness.

Related Content

Topics

The following topic provides additional information related to this topic:

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

View on GitHub