function pieToolTipContent(e) { var str = ""; var total = 0; for (var i = 0; i < e.entries.length; i++){ var count = e.entries[i].dataPoint.y; if (count==0) continue; var colorStyle = " style='background:"+e.entries[i].dataSeries.color + "'"; var str1 = "
"+e.entries[i].dataSeries.name+":"+count+"
"; total = e.entries[i].dataPoint.y + total; str = str.concat(str1); } var title = ""; if (e.entries.length>0) { //var index = e.entries[0].index; //title = "
"+e.entries[index].dataPoint.label+"
"; title = "
"+e.entries[0].dataPoint.label+"
"; } str = title + str + "
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 + " }" ); } var = new CanvasJS.Chart("", { fitInfo: { canvasComponentType: "Pie", canvasFld1: "", canvasFld2: "" }, animationEnabled: true, exportEnabled: true, title:{ text: "", fontFamily: "'Calibri',sans-serif", fontColor: "black", fontWeight: "bold", fontSize: 14 }, toolTip: { shared: true, borderColor: 'gray', backgroundColor: "#eee", cornerRadius: 2, borderThickness: 2, contentFormatter: pieToolTipContent }, data: [ { type: "pie", showInLegend: false, toolTipContent: " {label} : {y}
Total : #total", dataPoints: [ ] }, ] }); .render(); enableCanvasFitOptions();