Chartjs-How to set up an initial Zoom value for a chart (ChartJS + ChartJS Zoom plugin)?

by

0👍

You can call the .zoom functions which takes a percentage as a number to zoom to so a 10% increase would require you to pass 1.1.

Reason its called in a timeout after 10 ms is because otherwise it zooms the scale but not the points so it seems chart.js needs to finish up initializing first before you can call the zoom function:

const ctx = document.getElementById('cumulativeChart');
const labels = [
  'Jul 13',
  'Jul 14',
  'Jul 15',
  'Jul 16',
  'Jul 17',
  'Jul 18',
  'Jul 19',
  'Jul 20',
  'Jul 21',
  'Jul 22',
  'Jul 23',
  'Jul 24',
  'Jul 25',
  'Jul 26',
  'Jul 27',
  'Jul 28',
  'Jul 29',
  'Jul 30',
  'Jul 31',
  'Aug 01',
  'Aug 02',
  'Aug 03',
  'Aug 04',
  'Aug 05',
  'Aug 06',
  'Aug 07',
  'Aug 08',
  'Aug 09',
  'Aug 10',
  'Aug 11',
];

const data = {
  labels: labels,
  datasets: [{
    label: 'Cumulative Data',
    borderColor: '#3a96fd',
    borderWidth: 2,
    data: [
      0.13299527,
      0.16131551,
      0.18795605,
      0.20597476,
      0.22560615,
      0.23797296,
      0.25541133,
      0.28006363,
      0.30473082,
      0.32418763,
      0.33880094,
      0.35331442,
      0.36290294,
      0.38035896,
      0.40230393,
      0.42181523,
      0.43855241,
      0.4481249,
      0.4696107,
      0.48147319,
      0.4958352,
      0.52931651,
      0.55098815,
      0.56771866,
      0.58238203,
      0.60083731,
      0.61222939,
      0.6262777,
      0.64303029,
      0.65866165,
    ],
    pointRadius: 4,
    pointBackgroundColor: '#3a96fd',
    fill: true
  }]
};

const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    scales: {
      y: {
        grid: {
          color: 'rgba(128,151,177, 0.3)',
          borderDash: [3, 3],
          drawTicks: false,
          borderColor: '#424b5f',
        },
        ticks: {
          align: "center",
          padding: 10,
        },
      },
      x: {
        grid: {
          color: 'rgba(128,151,177, 0.3)',
          borderDash: [3, 5],
          drawTicks: false,
          borderColor: '#424b5f'
        },
        ticks: {
          align: "center",
          padding: 10,
        }
      }
    },
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        usePointStyle: true,
      },
      zoom: {
        zoom: {
          wheel: {
            enabled: true,
          },
          pinch: {
            enabled: true
          },
          mode: 'x',
        },
        pan: {
          enabled: true,
          mode: 'x',
        },
        limits: {
          x: {
            minRange: 3
          },
        },
      }
    }
  }
};

const myChart = new Chart(
  ctx,
  config
);

setTimeout(() => {
  myChart.zoom(3);
  myChart.pan({
    x: Number.MAX_SAFE_INTEGER
  }, undefined, 'default');
}, 10)
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.1.1/chartjs-plugin-zoom.min.js"></script>
<div class="container">
  <h3>Chart Example</h3>
  <div class="chart">
    <canvas id="cumulativeChart"></canvas>
  </div>
</div>

Leave a comment