// https://canvasjs.com/javascript-charts/stacked-column-chart/ var = new CanvasJS.Chart("", { animationEnabled: true, exportEnabled: true, title:{ text: "", fontFamily: "'Calibri',sans-serif", fontColor: "black", fontWeight: "bold", fontSize: 14 }, legend: { //maxHeight: 200, dockInsidePlotArea: true }, axisX: { interval: 1, //intervalType: "year" }, axisY:{ //valueFormatString:"$#0bn", gridColor: "#B6B1A8", tickColor: "#B6B1A8" }, toolTip: { shared: true, //fontSize: 12, borderColor: 'gray', backgroundColor: "#eee", cornerRadius: 2, borderThickness: 2, content: oppStackTipContent, updated: function ( e ) { console.log("X Value for which toolTip is shown: " + e.entries[0].xValue); } }, data: [ ] }); .render(); function oppStackTipContent(e) { var str = ""; var total = 0; for (var i = 0; i < e.entries.length; i++){ //var selected = ""; //if (e.dataPoint.name==e.entries[i].dataPoint.name) { // selected = ""+e.entries[i].dataSeries.name+":"+count+""; total = e.entries[i].dataPoint.y + total; } var title = ""; if (e.entries.length>0) { title = "
"+e.entries[0].dataPoint.label+"
"; } var totalStyle = " style='font-weight:bold;padding:2px 10px;text-align:right;'"; str = title + str + "
<td"+totalStyle+">Total:"+total+"
"; return ("

"+str+"

"); } function onStackClick(e){ console.log(" Run Filter on dataPoint { name:" + e.dataPoint.name + ", label:" + e.dataPoint.label + ", count: "+ e.dataPoint.y + " }" ); }