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

Question

I am trying to create a chart that has data for the last 30 days. But I would like to set up the initial Zoom value for the small screen sizes. So, the chart would display on mobile not all 30 values but rather 5 or 10. And I can just pan or zoom out the mobile version of that chart to explore all the data.

How can I set an initial value for zoom using ChartJS-plugin-zoom?

Thanks!

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
);

<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>

LeeLenalee · Answer 1 · 2021-08-17T22:20:53.180

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>

thanks!! I found out that I can substitute a timeout function with destroy() ``` lang-js myChart.zoom(3); myChart.destroy() myChart = new Chart(ctx, config); ``` — terrykon, Aug 17 '21 at 22:01
but at the same time that zoom function zooming in in the middle of the chart — terrykon, Aug 17 '21 at 22:06

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

1 Answers1