Stacked column chart with drill down - CanvasJS

Stacked column chart with drill down - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

JavaScript

chart = new CanvasJS.Chart("chartContainer",{
	title:{ 
		text: "Drill down stacked column chart"
	},
    toolTip: {
        enabled: false
    },
	axisX: {
		title: "click on stacked columns to see drill down, Click again to go back"
	},	
});
	
var	data = [
{
	type: "stackedColumn100",
    click: onClick,
	dataPoints:[
		{label: "Jan", y: 55.58  },		
		{label: "Feb", y: 20.09  }
	]
},
{
	type: "stackedColumn100",
    click: onClick,
	dataPoints:[
		{label: "Jan", y: 50.58  },		
		{label: "Feb", y: 30.09  }
	]
}];

chart.options.data = data;
chart.render();	

var data_Jan = [{
	type: "column",
	click: onCoulmnClick,
	dataPoints:[
		{label: "Jan 2012", y: 6.21},
		{label: "Jan 2013", y: 1.93}		
	]
}];

var data_Feb = [{
	type: "column",
    click: onCoulmnClick,
	dataPoints:[
		{label: "Feb 2012", y: 0.42},
		{label: "Feb 2013", y: 0.41},
		{label: "Feb 2014", y: 0.60}
	]
}];


function onClick(e) {
    if( e.dataPoint.label === "Jan" ){
        chart.options.data = data_Jan;
        chart.render();
       
    }
    else {
        chart.options.data = data_Feb;
        chart.render();
    }
}


function onCoulmnClick() {    
    chart.options.data = data;
    chart.render();
}