Chartjs-Trouble with chart scaling and zooming using Chart.js and chartjs-zoom-plugin

by

0👍

  1. The pan options should be placed under options.zoom (same level as options.zoom.zoom).

  2. option.zoom.zoom.mode is specified twice – one of them should be removed.

  3. rangeMin and rangeMax values only limit the axis range (as min and max values) and have no effect on duration

*In the fixed example below, dragZoom has been disabled to allow for panning when zoomed in.

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 // 
            },
            rangeMax: {
              x: 4200 //
            },
            //drag: true,
            //mode: 'xy',
            speed: 0.7
          },

          pan: {
            enabled: true, // Enable panning
            mode: 'x', // Allow panning in the x direction
            rangeMin: {
              x: 0 //
            },
            rangeMax: {
              x: 4200 // 
            }
          }
        }

      }
    }
  });
};

window.onload = function() {
  ctx = document.getElementById('canvas').getContext('2d');
  buildChart();
  //window.myLine = new window.Chart(ctx, config);
};
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.5"></script>
</head>

<body>
  <div>
    <canvas id='canvas' />
  </div>
</body>

Leave a comment