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: "Risk Costs Over Time", fontSize: 16 }, axisY: { title: "Risk Costs", includeZero: false, valueFormatString: "#,###,###,##" }, 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 + "'"; var val = CanvasJS.formatNumber(e.entries[i].dataPoint.y,"#,###,###,##"); str += ""+e.entries[i].dataSeries.name+":"+val+""; 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;'"; var val = CanvasJS.formatNumber(total,"#,###,###,##"); str = title + str + "Total:"+val+""; return (""+str+"
"); } }, legend: { cursor: "pointer", itemclick: toggleDataSeries }, axisX:{ interval: 1, intervalType: "month", includeZero: false }, data: [ ] }); .render();