Displaying data in positive and negative Y Axis using stackedColumn Chart - CanvasJS JavaScript Charts

Displaying data in positive and negative Y Axis using stackedColumn Chart - 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="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {    
		title: {
				text: "Stacked Column Chart"
		},
		data: [
		{
				type: "stackedColumn",
				showInLegend: true,
				legendText: "Boys",
				dataPoints: [
						{ y: 31, label: "Class 1" },
						{ y: 48, label: "Class 2" },
						{ y: 40, label: "Class 3" },
						{ y: 35, label: "Class 4" },
						{ y: 30, label: "Class 5" },
						{ y: 37, label: "Class 6" }
				]
		},{
				type: "stackedColumn",
				showInLegend: true,
				legendText: "Girls",
				dataPoints: [
						{ y: -45, label: "Class 1" },
						{ y: -32, label: "Class 2" },
						{ y: -28, label: "Class 3" },
						{ y: -40, label: "Class 4" },
						{ y: -35, label: "Class 5" },
						{ y: -32, label: "Class 6" }
				]
		}
		]
});

chart.render();