Creating Chart with Multiple Y Axis

With CanvasJS, you can create and add any number of axis as shown in this tutorial.

Here are the steps:

Step1:

Position the chart container wherever the chart is supposed to be rendered in the page.

HTML:

<div id="chartContainer"></div>

Step2:

Create multiple Y axis chart with axisY as an array of objects and axisYIndex assigned at dataSeries level that corresponds to axis to which it has to be attached. And assign it to specific chart-containers where chart is supposed to be rendered. And call corresponding chart render method to render the chart.

var chart = new CanvasJS.Chart("chartContainer",{
    title :{
        text: "Multiple Y Axis Chart"
    },
    axisY:[
        {
            title: " Axis Y 1 Title",
        },
        {
            title: " Axis Y 2 Title",
        }
    ]
    data: [{
        type: "line",
        axisYIndex: 0, //defaults to 0
        dataPoints : [
            { label: "apple",  y: 10  },
            { label: "orange", y: 15  },
            { label: "banana", y: 25  },
            { label: "mango",  y: 30  },
            { label: "grape",  y: 28  }
        ]
        },
        {
        type: "column",
        axisYIndex: 1,
        dataPoints : [
            { label: "apple",  y: 10  },
            { label: "orange", y: 15  },
            { label: "banana", y: 25  },
            { label: "mango",  y: 30  },
            { label: "grape",  y: 28  }
        ]
        }
    ]
});

chart.render();

Finalising

To summarize, in order to create chart with multiple axis, you should create a new chart with axisY as array of objects and attach every dataSeries to its corresponding axisY using axisYIndex. And call chart.render()

Below is the compilation of final code.

Try Editing The Code
If you have any questions, please feel free to ask in our forums.Ask Question