function toggleDataSeries(e) { if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { e.dataSeries.visible = false; } else { e.dataSeries.visible = true; } e.chart.render(); } var = new CanvasJS.Chart("", { title:{ text: "Risks Over Time", fontSize: 16 }, axisY: { title: "Count", includeZero: false }, toolTip: { shared: true, backgroundColor: "#eee", //fontColor: "white", borderColor: "gray", borderThickness: 2, cornerRadius: 2, contentFormatter: function (e) { var content = " "; var total = 0; var str = ""; for (var i = 0; i < e.entries.length; i++) { var nameStyle = " style='font-weight:bold;padding:4px 10px;color:"+e.entries[i].dataSeries.color + "'"; str += "
"+e.entries[i].dataSeries.name+":"+e.entries[i].dataPoint.y+"
"; total+=e.entries[i].dataPoint.y; } var title = ""; if (e.entries.length>0) { var xValue = ""+e.entries[0].dataPoint.x; var dateArr = xValue.split(" "); xValue = dateArr.slice(1,4).join(' '); title = "
"+xValue+"
"; } var totalStyle = " style='font-weight:bold;padding:2px 10px;'"; str = title + str + "
<td"+totalStyle+">Total:"+total+"
"; return ("

"+str+"

"); } }, legend: { cursor: "pointer", itemclick: toggleDataSeries }, axisX:{ interval: 1, intervalType: "month", //valueFormatString: "DDD", includeZero: false }, data: [ ] }); .render();