With CanvasJS, you can create and add any number of axis as shown in this tutorial.
Here are the steps:
Position the chart container wherever the chart is supposed to be rendered in the page.
HTML:
<div id="chartContainer"></div>
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();
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.
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix