Version 24.2 (latest)

Axis Intervals

Purpose

This topic demonstrates how to configure the major and minor intervals for chart axes of the igFinancialChart control.

In the igFinancialChart control, axis major interval specifies how frequent major gridlines and axis labels are rendered on an axis. Similarly, axis minor interval specifies how frequent minor gridlines are rendered on an axis.

In this topic

This topic contains the following sections:

Configuring XAxis and YAxis Gridlines

In order to configure Use this property And set it to

The frequency of major interval gridlines

This value provides configurable spacing for y-axis labels and major gridlines. 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 the igFinancialChart control’s axes, this value is represented as a number between the axis minimum value and axis maximum value. By default, this axis will automatically calculate and find a nice and round interval based on axis minimum values and maximum value.

The color of the major interval gridlines

A color of axis major gridlines.

The thickness of the major interval gridlines

A thickness in pixels of the axis major gridline stroke set as a double value.

The color of the minor interval gridlines

A color of axis minor gridlines.

The thickness of the minor interval gridlines

A thickness in pixels of the axis minor gridline stroke set as a double value.

Code Snippet

The following code snippet demonstrates how to configure the interval on the Y-axis.

In JavaScript:

$(".selector").igFinancialChart({
    dataSource: data,
    yAxisInterval: 400,
    yAxisMajorStroke: "Green",
    yAxisMinorStroke: "Blue",
    yAxisMajorStrokeThickness: 3,
    yAxisMinorStrokeThickness: 1
});
financialchart jquery axis intervals.png

Related Content

Topics

The following topics provide additional information related to this topic:

Topic Purpose

This topic provides a conceptual overview of the igFinancialChart control.

This topic provides information about configuring the labels along the axes in the igFinancialChart control.

This topic provides information about configuring the range of the Y-axis in the igFinancialChart control.

View on GitHub