Axes

Most Series data are displayed using axes to convert from data values to canvas pixel coordinates. Some series like Pie and Donut do not use axes.

Each Chart has an Axes property containing a list of Axis.
There exist four default Axis inside a chart: left, top, right and bottom.

var a = Chart1.axes.left;

Series relationship

Each Series has two properties that control which horizontal and vertical axes are used: horizAxis and vertAxis.

By default, the horizontal axis is bottom, and the vertical axis is left, but you can change it:

Chart1.series.items[0].horizAxis = “top”;
Chart1.getSeries(1).vertAxis = “right”;

Series can also display using both axes:

Chart1.series.items[2].horizAxis = “both”;

Axis visibility

Axis visibility is controlled globally by the Chart1.axes.visible property, and individually using the axis visible:

Chart1.axes.visible = true;
Chart1.axes.bottom.visible = true;

Axis scales

Scales are automatically controlled by default. Each axis calculates its minimum and maximum values based on its associated series values and visual properties.

You can override axis automatic scales and set them manually:

var a = Chart1.axes.left;
a.automatic = false;
a.minimum = 50;
a.maximum = 200;

The above code is equivalent to:

Chart1.axes.left.setMinMax( 50, 200 );

Logarithmic scales

Axes scales are linear by default. The log property determines the axis to use natural logarithm scaling instead of linear:

Chart1.axes.left.log = true;

Axis Labelling

Each axis automatically calculates the “best” distance from labels, using labels formatting properties like font.size. Custom labels can be controlled changing the axis increment property:

Chart1.axes.bottom.increment = 100;    // one label at each 100 values in axis scale.

Increment is zero by default, meaning automatic calculation.

Labels can display series values or series point labels. This is controlled with the labelStyle property:

// options are:  “auto”, “none”, “value”, “mark”, “text”, “x”
Chart1.axes.left.labels.labelStyle = “text”;

When series contain date-time values, labels are formatted according to dateFormat property using Steven Levithan date.format.js library.

Chart1.series.items[0].data.x = [ new Date() ];
Chart1.axes.bottom.labels.dateFormat = “shortDate”;

Other properties that control labels:

Chart1.axes.left.labels.alternate = true;  // double quantity of labels
Chart1.axes.right.labels.visible = false;  // show or hide labels
Chart1.axes.left.labels.decimals = 3;    // output numbers with up to 3 fixed decimals
Chart1.axes.bottom.labels.rotation = 90;    // 90 degree rotation

Axis Grids

The axis grid property includes a format to draw grid lines that go across chart axes space.

Chart1.axes.left.grid.visible = true;

When grid fill color is not empty, grids are filled alternatively as “bands”:

Chart1.axes.left.grid.format.fill = “red”;

Grid lines format is controlled by stroke property:

Chart1.axes.left.grid.format.stroke.size = 5;

Default grid lines are solid lines. The lineDash property displays dash-dot grids:

Chart1.axes.left.grid.lineDash = true;

On browsers that natively support canvas dash strokes, the above code is equivalent to:

Chart1.axes.left.grid.format.stroke.dash = [10,5];    // see “dash” stroke property

Axis Ticks

Axis include ticks an innerTicks properties of type Ticks, that have a stroke property.

Ticks are drawn from labels to axis. Inner ticks display from axis towards inside.

Chart1.axes.bottom.innerTicks.visible = true;
Chart1.axes.left.ticks.length = 9;
Chart1.axes.top.ticks.stroke.fill = “blue”;

Minor Ticks

From tick to tick, the minorTicks axis property can be used to display small sub-ticks:

Chart1.axes.left.minorTicks.visible = true;
Chart1.axes.left.minorTicks.length = 2;
Chart1.axes.left.minorTicks.count = 5;
Chart1.axes.left.minorTicks.stroke.fill = “green”;

Axis Title

Close to an axis, the title property is used to display text that identifies the axis:

Chart1.axes.bottom.title.text = “Quantity”;
Chart1.axes.bottom.title.text.format.font.fill = “red”;

Axis positioning

Size and position of axes is automatic by default.
The axis startPos and endPos properties control the pixel coordinate of axes.