0

I have a chart that is updated with a new datapoint every minute. This chart also uses the chartjs-zoom-plugin to allow the user to zoom in. There is a button on my webpage that calls the chart.resetZoom() function to allow the user to quickly zoom all the way out, but it only zooms out to the original range of the graph. So for example, the graph starts out with 100 data points, and once it updates to 101 datapoints and the user clicks the button, the graph resets to show the data points from 0-100 and not 0-101.

Looking through the chartjs-zoom-plugin source code, it looks like a "storeOriginalOptions()" function is called when the user initiates their first zoom/pan, and stores the original min/max data points for the "resetZoom()" function to reference where it should zoom out to. Is there a way to update this when I add new data points so resetZoom() zooms out all the way to include the new data points?

Dan
  • 67
  • 6

1 Answers1

0

Yes, I can confirm this as of chartjs-plugin-zoom 0.7.7, with all the caveats regarding undocumented features. There is discussion here and a practical example of overriding storeOriginalOptions(chart) in Eliz's fiddle, with the critical portion being:

var originalOptions = chart.$zoom._originalOptions;
helpers.each(chart.scales, function(scale) {
    if (!originalOptions[scale.id]) {
        originalOptions[scale.id] = helpers.clone(scale.options);
    }
});

So if needed, you can edit properties on $zoom directly. If you know the IDs assigned to your scales and just want to reset to whatever range the axes are currently set to, then you can further shorten the copying of scales into _originalOptions:

chart.$zoom._originalOptions = {
    myXID: chart.options.scales.xAxes[0],
    myYID: chart.options.scales.yAxes[0],
};
MBer
  • 2,218
  • 20
  • 34