zooming by wheel
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
"zoomEnabled": true,
"zoomType": "x",
"theme": "white",
"toolTip": {
"shared": true,
"enabled": true,
"animationEnabled": false
},
"axisX": {
"labelFontSize": 14,
"interval": 10,
"intervalType": "minute",
"gridThickness": 1,
"gridColor": "#9C9998",
"xValueType": "dateTime",
"xValueFormatString": "HH:mm:ss.ff"
},
"axisY": [
{
"gridThickness": 1,
"gridColor": "#9C9998",
"lineThickness": 2,
"labelFontSize": 14,
"lineColor": "#90D314",
"labelFontColor": "#90D314",
}
],
"axisY2": [],
"backgroundColor": "#ffffff",
"data": [
{},
{
"connectNullData": true,
"markerType": "circle",
"markerSize": 1,
"type": "spline",
"xValueType": "dateTime",
"yValueFormatString": "###",
"xValueFormatString": "HH:mm:ss.ff",
"showInLegend": false,
"lineThickness": 1,
"axisYType": "primary",
"lineDashType": null,
"dataPoints": [
{
"x": 1729598094900,
"visibleX": 1729598088000,
"y": -0.8172562234854223
},
{
"x": 1729598094900,
"visibleX": 1729598094500,
"y": -0.9837480662267594
},
{
"x": 1729598095000,
"visibleX": 1729598095000,
"y": -0.6826110717878815
},
{
"x": 1729598095500,
"visibleX": 1729598095500,
"y": 0.2461153940305301
},
{
"x": 1729598096000,
"visibleX": 1729598096000,
"y": 0.9485645015965639
},
{
"x": 1729598096500,
"visibleX": 1729598096501,
"y": 0.7789077809240422
},
{
"x": 1729598097000,
"visibleX": 1729598097000,
"y": -0.10687316141277222
},
{
"x": 1729598097500,
"visibleX":...