JavaScript
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
axisX:{
valueFormatString: "DD,MMM HH:mm 'hr'",
stripLines:[{
startValue: new Date(2019,08,13),// 2019-08-13 at 12:00 h
endValue: new Date(2019,08,18), // 2019-08-18 at 23:00 hr
label: "In the 40s"
}]
},
data: [
{
type: "splineArea",
color: "rgba(83, 223, 128, .6)",
xValueType: "dateTime",
dataPoints: [
{ x: 1568304000000, y: 0},
{ x: 1568307600000, y: 9.8},
{ x: 1568340000000, y: 55},
{ x: 1568343600000, y: 55},
{ x: 1568347200000, y: 55},
{ x: 1568350800000, y: 55},
{ x: 1568422800000, y: 46.4},
{ x: 1568426400000, y: 46.4},
{ x: 1568430000000, y: 46.4},
{ x: 1568433600000, y: 46.4},
{ x: 1568437200000, y: 46},
{ x: 1568440800000, y: 46},
{ x: 1568444400000, y: 46},
{ x: 1568448000000, y: 46},
{ x: 1568451600000, y: 46},
{ x: 1568494800000, y: 45.5},
{ x: 1568498400000, y: 45.5},
{ x: 1568606400000, y: 45.4},
{ x: 1568610000000, y: 45.4},
{ x: 1568707200000, y: 45},
{ x: 1568710800000, y: 45},
{ x: 1568836800000, y: 44},
{ x: 1568840400000, y: 44},
{ x: 1568919600000, y: 41},
{ x: 1568923200000, y: 42},
{ x: 1568948400000, y: 43},
{ x: 1568952000000, y: 43},
{ x: 1568955600000, y: 43}
]
}
]
});
chart.render();
document.getElementById("button").addEventListener("click", function(){
var label = chart.axisX[0].stripLines[0].get("label");
document.getElementById("display").innerHTML = "Initial Label: " + label;
chart.axisX[0].stripLines[0].set("color","red", false);
chart.axisX[0].stripLines[0].set("label","New...