title: Trouble with chart scaling and zooming using Chart.js and chartjs-zoom-plugin
body: <p>I'm trying to add chartjs-zoom-plugin to my project, where's Y axis - is temperature from 0 to 100, and x - axis is a number of channels from 0 to 4200+. Beforehand, sorry for my english.</p>
  
  <p>So, I wrote some code at my project, zooming is working, but while zooming, the x-axis index don't change, and it's very hard to understand the information from my chart.Y-values change according the place i zoom, but x-values don't. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ctx, config;
  
  // filler data as actual data was not provided in original post
  var dotsForXLabel = [0,700,1400,2100,4160,4200];
  var filteredTempMas = [30,10,40,90,100,-60];
  
  function buildChart() {
    config = new Chart(ctx, {
      type: "line",
      data: {
        "labels": dotsForXLabel,
        "datasets": [{
          "label": "DTS Riga",
          "data": filteredTempMas,
          "fill": false,
          "borderColor": "rgb(192,35,16)",
          "pointRadius": 0.5,
          "pointHoverBackgroundColor": 'red',
          "pointHoverBackgroundColor": 'red',
          "lineTension": 0.1
        }]
      },
      options: {
        responsive: true,
        // tooltips: {
        //     mode: 'dataset'
        // },
        scales: {
          xAxes: [{
            ticks: {
              beginAtZero: true,
            },
  
            scaleLabel: {
              display: false,
              labelString: 'Метр участка ОВК',
            },
  
          }],
          yAxes: [{
            ticks: {
              beginAtZero: true,
  
            },
            scaleLabel: {
              display: true,
              labelString: 'Температура'
            }
          }]
        },
  
  
  
  
        plugins: {
          zoom: {
            zoom: {
              enabled: true,
              mode: 'x', // Allow zooming in the x direction
              rangeMin: {
                x: 0 // Min value of the duration option
              },
              rangeMax: {
                x: 100 // Max value of the duration option
              },
              drag: true,
              mode: 'xy',
              speed: 0.7
            }
          },
          pan: {
            enabled: true, // Enable panning
            mode: 'x', // Allow panning in the x direction
            rangeMin: {
              x: 0 // Min value of the delay option
            },
            rangeMax: {
              x: 100 // Max value of the delay option
            }
          },
  
        }
      }
    });
  };
  
  window.resetZoom = function() {
    window.myLine.resetZoom();
  };
  
  window.toggleDragMode = function() {
    var chart = window.chart;
    var zoomOptions = config.options.plugins.zoom.zoom;
    zoomOptions.drag = !zoomOptions.drag;
    chart.update();
    document.getElementById('drag-switch').innerText = zoomOptions.drag ? 'Disable drag mode' : 'Enable drag mode';
  };
  
  window.onload = function() {
    ctx = document.getElementById('canvas').getContext('2d');
    buildChart();
    //window.myLine = new window.Chart(ctx, config);
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.5"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div&gt;
      &lt;canvas id='canvas' /&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Screenshot of actual chart</strong>:</p>
  
  <p><a href="https://i.stack.imgur.com/bT6i8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bT6i8.png" alt="enter image description here"></a></p>