JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
axisX: {
valueFormatString: "DD MMM,YY"
},
axisY: {
title: "No of Views",
suffix: "k"
},
toolTip:{
shared: true,
contentFormatter: function(e) {
var content = "<a href='https://canvasjs.com/'>" + CanvasJS.formatDate(e.entries[0].dataPoint.x, "DD MMM,YY") + "</a><br/>";
for(var i = 0; i < e.entries.length; i++) {
content += "<span style='color:" + e.entries[i].dataSeries.color +";'>" + e.entries[i].dataSeries.name + "</span>: " + "<strong>" + e.entries[i].dataPoint.y + "k</strong>";
content += "<br/>";
}
return content;
}
},
data: [{
name: "Homepage",
type: "spline",
showInLegend: true,
dataPoints: [
{ x: new Date(2017,6,24), y: 31 },
{ x: new Date(2017,6,25), y: 31 },
{ x: new Date(2017,6,26), y: 29 },
{ x: new Date(2017,6,27), y: 29 },
{ x: new Date(2017,6,28), y: 31 },
{ x: new Date(2017,6,29), y: 30 },
{ x: new Date(2017,6,30), y: 29 }
]
}, {
name: "Forums",
type: "spline",
showInLegend: true,
dataPoints: [
{ x: new Date(2017,6,24), y: 20 },
{ x: new Date(2017,6,25), y: 20 },
{ x: new Date(2017,6,26), y: 25 },
{ x: new Date(2017,6,27), y: 25 },
{ x: new Date(2017,6,28), y: 25 },
{ x: new Date(2017,6,29), y: 25 },
{ x: new Date(2017,6,30), y: 25 }
]
}, {
name: "License",
type: "spline",
showInLegend: true,
dataPoints: [
{ x: new Date(2017,6,24), y: 22 },
{ x: new Date(2017,6,25), y: 19 },
{ x: new Date(2017,6,26), y: 23 },
{ x: new Date(2017,6,27), y: 24 },
{ x: new Date(2017,6,28), y: 24 },
{ x: new Date(2017,6,29), y: 23 },
{ x: new Date(2017,6,30), y: 23 }
]
}]
});
chart.render();