Multi-axis Line Chart

This chart type belongs to PowerCharts XT.

A multi-axis line chart, as the name suggests, is an interactive line chart that can be configured for multiple axes. It 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. For example, 1-100 on one axis, 1m - 100m on another axis, and 0 - 1 on yet another axis) on the same chart.

Features

The FusionCharts Suite XT 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 the chart.

  • Interactive options, like dynamic sliding of the 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

Create a Multi-Axis Line Chart

Let's create our first multi-axis line which will showcase the revenue analysis Harry's SuperMart depending on the revenue, orders, and footfall for 12 weeks.

To create a multi-axis line chart follow the steps given below:

  • In the JSON data, set the attributes and their corresponding values in "<attributeName>": "<value>" format.

  • Specify the chart type using the type attribute. To render a multi-axis line chart, set multiaxisline.

  • Set the container object using renderAt attribute.

  • Specify the dimension of the chart using width and height attributes.

  • Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute.

The attributes and the structure of the multi-axis line chart is a bit different from the multi-series charts. So there are some configurations and attributes which may help you in customizing your chart. They are:

  • Specify the title attribute to set the title for an axis. This attribute belongs to the axis object.

  • Specify the tickWidth attribute to set the width between the tick marks protruding from the axis. This attribute belongs to the axis object.

  • Specify whether the axis will be rendered on the left side of the canvas or the right side using axisOnLeft attribute. 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.

  • Specifying the allowSelection attribute will let you set the checkbox shown for each axis. Selecting/clearing this checkbox for an axis will show/hide the data set belonging to that axis.

  • Specify the allowAxisShift attribute to set the dynamic shifting of an axis. 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.

  • Set the showAxis attribute to specify whether the 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.

For a detailed list of attributes, refer to the chart attributes page of multi-axis line chart.

Refer to the code below:

{
    "chart": {
        ...
    },
    "categories": [{
            "category": [
            ]
        }],
    "axis": [{
        "showAxis": "1",
        "allowAxisShift": "1",
        "title": "Revenue",
        "tickWidth": "10",
        "numberPrefix": "$",
        "divlineDashed": "1",
        "dataset": [{
            ...
        }]
    }]
}

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

FusionCharts will load here..
{
    "chart": {
        "caption": "Revenue Analysis",
        "subcaption": "Last 12 weeks",
        "xAxisName": "Week of Year",
        "showValues": "0",
        "theme": "fusion"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "1"
                },
                {
                    "label": "2"
                },
                {
                    "label": "3"
                },
                {
                    "label": "4"
                },
                {
                    "label": "5"
                },
                {
                    "label": "6"
                },
                {
                    "label": "7"
                },
                {
                    "label": "8"
                },
                {
                    "label": "9"
                },
                {
                    "label": "10"
                },
                {
                    "label": "11"
                },
                {
                    "label": "12"
                }
            ]
        }
    ],
    "axis": [
        {
            "title": "Revenue",
            "tickWidth": "10",
            "numberPrefix": "$",
            "divlineDashed": "1",
            "dataset": [
                {
                    "seriesname": "Revenue",
                    "lineThickness": "3",
                    "data": [
                        {
                            "value": "137500"
                        },
                        {
                            "value": "124350"
                        },
                        {
                            "value": "156700"
                        },
                        {
                            "value": "131450"
                        },
                        {
                            "value": "208300"
                        },
                        {
                            "value": "219900"
                        },
                        {
                            "value": "227500"
                        },
                        {
                            "value": "254300"
                        },
                        {
                            "value": "155900"
                        },
                        {
                            "value": "105650"
                        },
                        {
                            "value": "120950"
                        },
                        {
                            "value": "127500"
                        }
                    ]
                }
            ]
        },
        {
            "title": "Orders",
            "axisOnLeft": "0",
            "numDivlines": "8",
            "tickWidth": "10",
            "divlineDashed": "1",
            "dataset": [
                {
                    "seriesname": "Orders",
                    "data": [
                        {
                            "value": "22567"
                        },
                        {
                            "value": "21348"
                        },
                        {
                            "value": "24846"
                        },
                        {
                            "value": "19237"
                        },
                        {
                            "value": "20672"
                        },
                        {
                            "value": "23403"
                        },
                        {
                            "value": "30278"
                        },
                        {
                            "value": "26719"
                        },
                        {
                            "value": "21940"
                        },
                        {
                            "value": "24396"
                        },
                        {
                            "value": "22340"
                        },
                        {
                            "value": "25439"
                        }
                    ]
                }
            ]
        },
        {
            "title": "Footfalls",
            "axisOnLeft": "0",
            "numDivlines": "5",
            "tickWidth": "10",
            "numberSuffix": "",
            "divlineDashed": "1",
            "dataset": [
                {
                    "seriesname": "Footfalls",
                    "data": [
                        {
                            "value": "68473"
                        },
                        {
                            "value": "57934"
                        },
                        {
                            "value": "78925"
                        },
                        {
                            "value": "69213"
                        },
                        {
                            "value": "74892"
                        },
                        {
                            "value": "81123"
                        },
                        {
                            "value": "90086"
                        },
                        {
                            "value": "91174"
                        },
                        {
                            "value": "68934"
                        },
                        {
                            "value": "80934"
                        },
                        {
                            "value": "73634"
                        },
                        {
                            "value": "84453"
                        }
                    ]
                }
            ]
        }
    ]
}
<chart caption="Revenue Analysis" subcaption="Last 12 weeks" xaxisname="Week of Year" showvalues="0" theme="fusion">
    <categories>
        <category label="1" />
        <category label="2" />
        <category label="3" />
        <category label="4" />
        <category label="5" />
        <category label="6" />
        <category label="7" />
        <category label="8" />
        <category label="9" />
        <category label="10" />
        <category label="11" />
        <category label="12" />
    </categories>
    <axis title="Revenue" tickwidth="10" numberprefix="$" divlinedashed="1">
        <dataset seriesname="Revenue" linethickness="3">
            <set value="137500" />
            <set value="124350" />
            <set value="156700" />
            <set value="131450" />
            <set value="208300" />
            <set value="219900" />
            <set value="227500" />
            <set value="254300" />
            <set value="155900" />
            <set value="105650" />
            <set value="120950" />
            <set value="127500" />
        </dataset>
    </axis>
    <axis title="Orders" axisonleft="0" numdivlines="8" tickwidth="10" divlinedashed="1">
        <dataset seriesname="Orders">
            <set value="22567" />
            <set value="21348" />
            <set value="24846" />
            <set value="19237" />
            <set value="20672" />
            <set value="23403" />
            <set value="30278" />
            <set value="26719" />
            <set value="21940" />
            <set value="24396" />
            <set value="22340" />
            <set value="25439" />
        </dataset>
    </axis>
    <axis title="Footfalls" axisonleft="0" numdivlines="5" tickwidth="10" numbersuffix="" divlinedashed="1">
        <dataset seriesname="Footfalls">
            <set value="68473" />
            <set value="57934" />
            <set value="78925" />
            <set value="69213" />
            <set value="74892" />
            <set value="81123" />
            <set value="90086" />
            <set value="91174" />
            <set value="68934" />
            <set value="80934" />
            <set value="73634" />
            <set value="84453" />
        </dataset>
    </axis>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'multiaxisline',
    renderAt: 'chart-container',
    width: '600',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Revenue Analysis",
            "subcaption": "Last 12 weeks",
            "xAxisName": "Week of Year",
            "showValues": "0",
            "theme": "fusion"
        },
        "categories": [{
            "category": [{
                "label": "1"
            }, {
                "label": "2"
            }, {
                "label": "3"
            }, {
                "label": "4"
            }, {
                "label": "5"
            }, {
                "label": "6"
            }, {
                "label": "7"
            }, {
                "label": "8"
            }, {
                "label": "9"
            }, {
                "label": "10"
            }, {
                "label": "11"
            }, {
                "label": "12"
            }]
        }],
        "axis": [{
            "title": "Revenue",
            "tickWidth": "10",
            "numberPrefix": "$",
            "divlineDashed": "1",
            "dataset": [{
                "seriesname": "Revenue",
                "lineThickness": "3",
                "data": [{
                    "value": "137500"
                }, {
                    "value": "124350"
                }, {
                    "value": "156700"
                }, {
                    "value": "131450"
                }, {
                    "value": "208300"
                }, {
                    "value": "219900"
                }, {
                    "value": "227500"
                }, {
                    "value": "254300"
                }, {
                    "value": "155900"
                }, {
                    "value": "105650"
                }, {
                    "value": "120950"
                }, {
                    "value": "127500"
                }]
            }]
        }, {
            "title": "Orders",
            "axisOnLeft": "0",
            "numDivlines": "8",
            "tickWidth": "10",
            "divlineDashed": "1",
            "dataset": [{
                "seriesname": "Orders",
                "data": [{
                    "value": "22567"
                }, {
                    "value": "21348"
                }, {
                    "value": "24846"
                }, {
                    "value": "19237"
                }, {
                    "value": "20672"
                }, {
                    "value": "23403"
                }, {
                    "value": "30278"
                }, {
                    "value": "26719"
                }, {
                    "value": "21940"
                }, {
                    "value": "24396"
                }, {
                    "value": "22340"
                }, {
                    "value": "25439"
                }]
            }]
        }, {
            "title": "Footfalls",
            "axisOnLeft": "0",
            "numDivlines": "5",
            "tickWidth": "10",
            "numberSuffix": "",
            "divlineDashed": "1",
            "dataset": [{
                "seriesname": "Footfalls",
                "data": [{
                    "value": "68473"
                }, {
                    "value": "57934"
                }, {
                    "value": "78925"
                }, {
                    "value": "69213"
                }, {
                    "value": "74892"
                }, {
                    "value": "81123"
                }, {
                    "value": "90086"
                }, {
                    "value": "91174"
                }, {
                    "value": "68934"
                }, {
                    "value": "80934"
                }, {
                    "value": "73634"
                }, {
                    "value": "84453"
                }]
            }]
        }]
    }
}
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the multi-axis line chart.