Render Multiple Charts in a Page

With CanvasJS, you can create and add multiple Charts in a page 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, with separate chart-container id for each chart.

HTML:

<div id="chartContainer1"></div>
.
.
.
<div id="chartContainer2"></div>

Step2:

Create multiple charts and assign it to specific chart-containers where chart is supposed to be rendered, like chartContainer1, chartContainer2 and so on. And call corresponding chart render method to render the chart, like chart1.render(), chart2.render() and so on.

var chart1 = new CanvasJS.Chart("chartContainer1",{
    title :{
        text: "Live Data"
    },
    data: [{
	type: "line",
        dataPoints : [
	    { label: "apple",  y: 10  },
	    { label: "orange", y: 15  },
	    { label: "banana", y: 25  },
	    { label: "mango",  y: 30  },
	    { label: "grape",  y: 28  }
	]
    }]
});
var chart2 = new CanvasJS.Chart("chartContainer2",{
    title :{
	text: "Live Data"
    },
    data: [{
	type: "column",
	dataPoints : [
	    { label: "apple",  y: 10  },
	    { label: "orange", y: 15  },
	    { label: "banana", y: 25  },
	    { label: "mango",  y: 30  },
	    { label: "grape",  y: 28  }
	]
    }]
});

chart1.render();
chart2.render();

Finalising

To summarize, in order to create multiple charts in a page, you should position a chart-container, create a new chart and call chart.render()

Below is the compilation of final code.

Try it Yourself by Editing the Code below.
If you have any questions, please feel free to ask in our forums.Ask Question