<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.3.0/Chart.Zoom.min.js"></script>
</head>
<body>
<div id="div_linechart">
<button id="reset_zoom" style="float:right;color:black;">Reset</button>
<canvas id="linechart"></canvas>
</div>
</body>
<script>
var ctx = document.getElementById("linechart").getContext("2d");
window.myChart = new Chart(ctx, {
type: 'line',
data: window.chartdata,
options: {
responsive: true,
animation: false,
tooltips: {
mode: 'nearest', //'label'
intersect: false,
position: 'nearest',
},
legend: {
display: false,
labels: {
fontColor: "#FFFFFF",
fontSize: 12
}
},
hover: {
mode: 'x'
},
scales: {
xAxes: [{
ticks: {
fontColor: "#FFFFFF",
fontSize: 12
},
display: true,
type: 'time',
time: {
tooltipFormat:'ddd MMM DD YYYY hh A',
},
gridLines: {
color: "#595959",
}
}],
yAxes: [{
ticks: {
fontColor: "#FFFFFF",
fontSize: 14
},
gridLines: {
color: "#999999",
}
}],
},
pan: {
enabled: true,
mode: 'x',
},
zoom: {
enabled: true,
mode: 'x',
}
}
});
</script>
</html>