Have the current zoom information in chart.js with zoom plugin

Question

I'm trying to have a start date and end date of my zoom, not the start min and max of my chart. I don't find issues. Someone can help ? It's in VueJS

plugins: {
 datalabels: {
  display: false
 },
 zoom: {
  zoom: {
   enabled: true,
   drag: true,
   mode: "x",
   sensitivity: 100,
   speed: 10,
   onZoom: this.onZoom
  }
 }
}



onZoom({ chart }) {
      console.log(chart)
      const start = chart.scales.time.min; // I have to change this
      const end = chart.scales.time.max; // I have to change this
      console.log(start, end)
      this.$emit("interval", { start, end });
    }

for example I have my chart start at 12:00 and end at 16:00. I click between 14:00 and 15:00 and I want to take these values and give it to my parent.

I have find how to do, thanks – Calaelen04 Aug 14 '19 at 07:35 — Calaelen04, Aug 14 '19 at 07:35
Then update your question and show others how you did it! – Vl4dimyr Nov 02 '19 at 12:12 — Vl4dimyr, Nov 02 '19 at 12:12

t.animal · Answer 1 · 2021-06-27T17:42:37.810

I don't think you can. The chartjs zoom plugin merely modifies the min/max settings of the scaled axes. You could use that to determine the zoom factor if you know the start min/max values, I guess. The plugin stores the min/max internally for the resetZoom function, but I don't think you have access to it.

If you, like me, just want to apply the same zoom to another (or in my case a new chart) chart, maybe this will help you (works with chart.js 3/chartjs-plugin-zoom 1.1):

const options = chart?.scales.x.options; // store the options of the old chart
chart?.clear(); // tear down the old chart
chart?.destroy();
chart = renderChart(canvas, data); // create a new one

if(options) {
  chart.zoom({x: 1}); // make sure internal structures of the zoom plugin are set up
  chart.scales.x.options.min = options.min; // restore the zoom
  chart.scales.x.options.max = options.max;
  chart.update(); //rerender the chart
}

Have the current zoom information in chart.js with zoom plugin

1 Answers1