// https://canvasjs.com/javascript-charts/stacked-column-chart/ var = new CanvasJS.Chart("", { fitInfo: { canvasComponentType: "Stack", canvasFld1: "", canvasFld2: "" }, 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: toolTipContent, cornerRadius: 4, updated: function ( e ) { console.log("X Value for which toolTip is shown: " + e.entries[0].xValue); } }, data: [ ] }); .render(); enableCanvasFitOptions(); function toolTipContent(e) { var str = ""+e.entries[0].dataPoint.label+"
"; var total = 0; var str2, str3; for (var i = 0; i < e.entries.length; i++){ var str1 = " "+e.entries[i].dataSeries.name+": "+e.entries[i].dataPoint.y+"
"; total = e.entries[i].dataPoint.y + total; str = str.concat(str1); } str2 = ""; //""+(e.entries[0].dataPoint.x).getFullYear()+"
"; //total = Math.round(total * 100) / 100; str3 = "Total: "+total+"
"; return (str2.concat(str)).concat(str3); } function onStackClick(e){ alert(" Run Filter on dataPoint { Project:" + e.dataPoint.label + ", Severity: "+ e.dataSeries.legendText + " }" ); }