Reply To: multiple chart in one page

[Priyanka M S]

@samira.2018,

It is possible to display multiple charts in the same page with the same chart options and different dataPoints.

You will have to create multiple chartContainers with separate id for each, and create multiple charts which you can assign to specific chartContainers and call the corresponding chart render method.
Please take a look at the code snippet below,

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();

Also, kindly take a look at our documentation page for a step-by-step tutorial on how to render multiple charts in a page.

__
Priyanka M S
Team CanvasJS

• This reply was modified 4 years, 10 months ago by Priyanka M S.
• This reply was modified 2 years ago by Manoj Mohan.