Multiple Pyramid Charts in a Page - CanvasJS JavaScript Charts

Multiple Pyramid Charts in a Page - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer1" class="chartContainer"></div>
<div id="chartContainer2" class="chartContainer"></div>

CSS

.chartContainer {
  height: 360px;
  width: 49%;
  display: inline-block;
}

JavaScript

CanvasJS.addColorSet("customColors",
                [
                "#ED1B24",
                "#FEF200",
                "#3F47CC"                
                ]);
var chart1 = new CanvasJS.Chart("chartContainer1", {
	colorSet: "customColors",
	subtitles: [{
  	text: "Jan",
    verticalAlign: "bottom",
    fontColor: "#7C4B51",
    fontFamily: "calibri",
    fontSize: 16
  }],
	data: [{
		type: "pyramid",
		dataPoints: [
			{ y: 71 },
			{ y: 55 },
			{ y: 50 }
		]
	}]
});

var chart2 = new CanvasJS.Chart("chartContainer2", {
	colorSet: "customColors",
	subtitles: [{
  	text: "Feb",
    verticalAlign: "bottom",
    fontColor: "#7C4B51",
    fontFamily: "calibri",
    fontSize: 16
  }],
	data: [{
		type: "pyramid",
		dataPoints: [
			{ y: 71 },
			{ y: 55 },
			{ y: 50 }
		]
	}]
});

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