Multi-axis Line Chart

A multi-axis line chart, as the name suggests, is an interactive line chart that can be configured for multiple axes.

In this section, you will be introduced to:

  • Basics of a multi-axis line chart

  • Features of a multi-axis line chart

  • Creating a simple multi-axis line chart

Basics of a Multi-axis Line Chart

The multi-axis line chart is a special type of chart that allows multiple y-axes to be rendered in the same chart. The advantage of using a multi-axis line chart is that you can plot multiple data sets with different types of units (e.g. liter, kg, meter) and different scale ranges ( e.g. 1-100 on one axis, 1m - 100m on another axis, and 0 - 1 on yet another axis) on the same chart.

Features of a Multi-axis Line Chart

The FusionCharts Suite XT v3.4.0 multi-axis line chart includes the following features:

  • Multiple axes on the same chart

  • Interactive axis, which allows the end user to show or hide data sets (lines) plotted against that axis

  • Options to make the axis visible or imaginary

  • Options to draw the axis on left or right side of chart

  • Interactive options, like dynamic sliding of axis from one end to other upon clicking

  • Ability to plot multiple data-sets against the same axis

  • Options to configure axis-specific properties like:

    • Upper and lower limits

    • Cosmetic properties

    • Divisional Lines

    • Cosmetic properties of data-sets plotting against the particular axis

    • Number formatting

A multi-axis line chart rendered with three axes looks like this:

FusionCharts should load here..

Creating a Simple Multi-axis Line Chart

You have seen how a multi-axis line chart looks.

Given below is a brief description of the attributes used to configure a multi-axis line chart:

Attribute Name Description
title It is used to specify the title for an axis, e.g. Footfalls. This attribute belongs to the axis object.
tickWidth It is used to specify the width between the tick marks protruding from the axis. This attribute belongs to the axis object.
axisOnLeft It is used to specify whether the axis will be rendered on the left side of the canvas or the right side. Setting this attribute to 0 will render the axis on the right, setting it to 1 (default) will render it on the left. This attribute belongs to the axis object.
allowSelection It is used to specify whether a checkbox will be shown for each axis. Selecting/clearing this checkbox for an axis will show/hide the data set belonging to that axis.
allowAxisShift It is used to specify whether dynamic shifting of an axis will be enabled. If you click an axis that is not the primary (the first from the left of the canvas) or the secondary (the first from the right canvas) axis, the axis to the left of this axis will replace it. The axis that you clicked will be placed at the end, in case of multiple axes. Setting this attribute to 0 will disable the shifting of axes, setting it to 1 (default) will enable it.
showAxis It is used to specify whether an axis will be shown or hidden (referred to as an imaginary axis). Setting this attribute to 0 will hide the axis, setting it to 1 (default) will show it.

The data structure needed to create a simple multi-axis line chart is given below:

...

There! You have now seen the basics of a multi-axis line chart and understood how you can create and configure a simple one.