Zoom & Pan with Back Button - CanvasJS JavaScript Charts

Zoom & Pan with Back Button

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

JavaScript

var axisX = {};
var limit = 1000;    //increase number of dataPoints by increasing this
var data=[
  {
    "type": "line",
    "showInLegend": true,
    "legendText": "abcdjsadhjkhsdfjkhdjksfhdhf4dsfdg gfhgjhgjjhkjh",
    "name": "abcdjsadhjkhsdfjkhdjksfhdhf4dsfdg gfhgjhgjjhkjh",
    "toolTipContent": "<span style='\"'color: {color};'\"'>{name}</span>: {y}",
    "dataPoints": [
      {
        "x": 0,
        "y": 5,
        "meaQuantityId": null,
        "meaResultId": null,
        "nodeName": "d_1",
        "nodeType": null,
        "y1": null,
        "x1": null,
        "interval": null,
        "yUnitName": null,
        "xUnitName": "u1",
        "isHugeData": null,
        "value": null,
        "count": 1
      }
    ],
    "color": "#1BCDD1"
  },
  {
    "type": "line",
    "showInLegend": true,
    "legendText": "abcdjsadhjkhsdfjkhdjksfhdhf4dsfdg gfhgjhgjjhkjh",
    "name": "abcdjsadhjkhsdfjkhdjksfhdhf4dsfdg gfhgjhgjjhkjh",
    "toolTipContent": "<span style='\"'color: {color};'\"'>{name}</span>: {y}",
    "dataPoints": [
      {
        "x": 0,
        "y": 6,
        "meaQuantityId": null,
        "meaResultId": null,
        "nodeName": "d_2",
        "nodeType": null,
        "y1": null,
        "x1": null,
        "interval": null,
        "yUnitName": null,
        "xUnitName": "u1",
        "isHugeData": null,
        "value": null,
        "count": 1
      }
    ],
    "color": "#EC5657"
  },
  {
    "type": "line",
    "showInLegend": true,
    "legendText": "abcdjsadhjkhsdfjkhdjksfhdhf4dsfdg gfhgjhgjjhkjh",
    "name": "abcdjsadhjkhsdfjkhdjksfhdhf4dsfdg gfhgjhgjjhkjh",
    "toolTipContent": "<span style='\"'color: {color};'\"'>{name}</span>: {y}",
    "dataPoints": [
      {
        "x": 0,
        "y": 2,
        "meaQuantityId": null,
        "meaResultId": null,
        "nodeName": "df",
        "nodeType": null,
        "y1": null,
        "x1": null,
        "interval": null,
        "yUnitName": null,
        "xUnitName": "u1",
       ...