[Chartjs]-ChartJs: How to pan programmatically by time values (instead of pixels)

by

0👍

✅

I found the solution after all! Yeah :))

You can zoom by adding the min and max value! No need for pixels at all!
Use zoomScale method!
zoomScale(graphB, 'xAxes', {min: graphA.scales.xAxes.min, max: graphA.scales.xAxes.max}, 'none');
(The scale is ‘xAxes’ for me, I don’t know why the examples on offical pages says a simple ‘x’)

1👍

You can use the getPixelForValue method on the x axes. You do this for 2 time points from which you know how far they are appart from each other. Then you can calculate how many pixels you will need to shift the chart for any time frame you want.

Edit:
If you just want the width of the chartArea you can do it like so:

const chart = new Chart(ctx, config);
const chartAreaWidth = chart.chartArea.width;

0👍

Solution from @cncDAni3‘s answer is worked for me.

In React with react-chart-js2, using a ref:

ref.zoomScale("xAxes", { min: minX, max: maxX }, <mode>)

Leave a comment