chartjs-plugin-zoom seems to have some problems in conjunction with Chart.js 2.6.0: In my case, I cannot pan or zoom on the x-axis.

When I simply run npm install [email protected] x-axis panning and zooming starts working again immediately. Running npm install [email protected] breaks x-axis pan&zoom again. So it looks like a problem with the chart.js version.

Are you experiencing the same problems or is this working for you? Any ideas what I can do to upgrade to the latest version of chartjs-plugin-zoom (it has 2.6.0 as dependency)? Please help.

In my config I use:

pan: {
   enabled: true,
   mode: 'xy',
   rangeMin: {
     x: null,
     y: null
   },
   rangeMax: {
     x: null,
     y: null
   }
 },
 zoom: {
   enabled: true,
   mode: 'xy',
 }

Enviroment:

• Ionic 3.5.3
• ng2-charts 1.6.0

Edit: Chart-type: time

Based off of chartjs-plugin-annotation's approach.

Specific changes:

• Switch from Gulp to Rollup for build; using Rollup directly works and seems simpler.
• Refactor some duplicate configuration in rollup.config.js.
• Change import style for Chart.js and Chart.js helpers so that it will work with modules.
• The new import style doesn't allow adding to the imported object, which caused problems for the Chart.Zoom namespace. Since that namespace appears to be undocumented and unused, I removed it.

The ESM version does not automatically register the plugin. This matches chartjs-plugin-annotation and seems to better match Chart.js 3's tree-shaking design.

I'm unclear on whether the UMD build should automatically register the plugin. Not registering seems to better match Chart.js 3, and chartjs-plugin-datalabels recently changed to no longer register, but chartjs-plugin-annotation's UMD build does register.

Hello,

it's possible to load data when panning the chart? i would like to have an "infinite" panning mode (or with a certain bound) start from min = YESTERDAY max = NOW

and be able to pan till min = 2 YEARS AGO

of course, the min-max interval should be respected.

now, i pan, if i have an event to fecth another block of data to feed the chart, will be nice

regards

Hi, I have tried varying Zoom sensitivity value from 10 (very slow) to 0.0001 (pretty fast) but it seems that the dataset is Zoomed in 1 data point at a time.

Is there any way to control the 'step' of zoom function?

Thanks for any help.

Hi, I am trying to get pan & zoom working but I am not able to do that on X-axis even though I have the following settings. The provided examples works fine and I am trying to mimic those.

pan: { enabled: true, mode: 'xy' limits: { max: 10, min: 0.5 } },

zoom: { enabled: true, mode: 'xy' limits: { max: 10, min: 0.5 } },

What are the common mistakes when this happens? Fiddle: https://jsfiddle.net/jm1adysp/3/

As a first iteration to integrate into this plugin the tools used in the core and other plugins, this PR adds Rollup as module bundler to build the library. It allows to use ES modules, so we'll be able to split the plugin into several files.

• Rewrite the build task using Rollup and some Rollup plugins
• Remove old libraries used for building
• The dist files are now generated into /dist and unversioned
• The old dist files have been removed
• Rename the source file to plugin.js (as in chartjs-plugin-datalabels)

Notes:

• This PR contains a breaking change since the distribution files are moved to /dist, so it should imply a 0.7 version
• I think the Travis config should be updated to generate the dist files automatically on release (in a separate PR?)

Problem

When the drag option is set to true and dragging to select a part of the chart area, the zoomed area is not correct. For example, select the x-axis from 0 to 100 in the following chart. https://jsfiddle.net/nagix/qb3ycp9v/

Solution

This PR fixes the calculation of the zoom center coordinate when dragging.

• When selecting an area between the left edge and some point in the chart, the zoom center should be the left edge
• When selecting an area between the right edge and some point in the chart, the zoom center should be the right edge
• The x coordinate of the zoom center doesn't change before and after zooming

Fixes #52 Fixes #154

Hi

I am working on an implementation of the zoom plugin using the drag feature. I am following the samples/zoom-time.html example. When i drag a zoom area, the resulting line chart looses data points. This happens in both my chart and the example chart.

Drag:

Result:

As you can see the first data point is gone and the resulting chart is off too. The result in mine is even more extreme with more of a flattening line. It kind of looks like the chart data is averaged instead of zoomed.

Here is the zoom config I am using:

zoom: {
  enabled: true,
  drag: true,
  mode: 'x',
  limits: {
    max: 10,
    min: 0.5
  }
}

limits was in the example but I do not see in in chart.zoom.js

I'd love some help here :)

Thanks,

Jordan

A new method zoomToLimits is introduced to implement the feature of zooming into specified limits on the axes. The axes can be defined by their ids.

The function takes a single object argument:

{                                                    
    x: { min: 0, max: 10.1, axis_id: 'x-axis-1' },   
    y: { min: 1.34, max: 22.8, axis_id: 'y-axis-1' },
}                                                    

The axis id may be undefined, in this case the first x/y axis will be selected.

An example of using the method is included in new file samples/zoom-to-limits.html.

Also, parts of this PR are:

• fix for #95 ("resetZoom() does not restore original min/max")
• changes in range limiting functions that duplicate PR #99 (I discovered that PR after implementing the changes in my code..)

NOTE: I haven't tested the new method against time and indexed scales. Please let me know if you see an error there.

My barchart uses the chartjs-zoom plugin, however only the zoom functionality works.

`$(document).ready(function () { $.getJSON( "@Url.Action("GetData")", function (data) { BarChart(data); }); });

            function BarChart(data) {
                var barChartData = {
                    labels: data.Month,
                    datasets: [
                        {
                            label: 'Weight (kg)',
                            fillColor: "rgba(220,220,220,0.5)",
                            backgroundColor: "rgba(46, 44, 211, 0.7)",
                            highlightFill: "rgba(220,220,220,0.75)",
                            highlightStroke: "rgba(220,220,220,1)",
                            data: data.Weight
                        },
                        {
                            label: 'Steps',
                            fillColor: "rgba(0,0,0,0.5)",
                            backgroundColor: "rgba(215, 44, 44, 0.7)",
                            highlightFill: "rgba(0,0,0,0.5)",
                            highlightStroke: "rgba(0,0,0,0.5)",
                            data: data.Steps
                        }
                    ]

                }
                var ctx = document.getElementById("barchart").getContext("2d");
                window.myBar =new Chart(ctx, {
                    type: 'bar',
                    data: barChartData,
                    options: {
                        pan: {
                            enabled: true,
                            mode: 'xy',
                            speed: 10,
                            threshold: 10
                        },
                        zoom: {
                            enabled: true,
                            mode: 'xy',
                            limits: {
                                max: 1000,
                                min: 0.5
                            }
                        },
                        responsive: true,
                        tooltips: {
                            callbacks: {
                                afterLabel: function (e) { return "Owner: " + data.User[e.index] }
                            }
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
                
            }`

I have included: Script.Require("ChartJS"); Script.Require("ChartJSZoom"); Script.Require("Hammer"); and these requires contain the mins and regular packages for ChartJS, ChartJSZoom and Hammer.

The barchart is in the canvas: <div id="container" style="width:1100px; overflow-x:scroll;"> <canvas id="barchart"></canvas> </div> Some insight into why this isn't working would be great, I have tried to use the codepen example as a starting point (however the pan doesn't work on that either for me!?): http://codepen.io/anon/pen/PGabEK

The documentation is unfortunately unable to help with this issue also.

Thanks to anyone who can help, I would just like basic horizontal panning, XY panning would just be a bonus :)

Hi,

I'm currently working on an integration of Chart.js and the zoom plugin on an angular project, and everything was working fine with 2.9.4 & 0.7.7 respectively.

Working code on Chart.js 2.9.4

import { Chart, ChartData, ChartOptions, ChartPoint } from 'chart.js';
import 'chartjs-plugin-zoom';

{some code}

options: {
  plugins: {
    zoom: {
      pan: {
        enabled: true,
        mode: 'x',
        rangeMin: { x: 0 },
        rangeMax: { x: 100 }
      },
      zoom: {
        enabled: true,
        mode: 'x',
        rangeMin: { x: 0 },
        rangeMax: { x: 100 }
      }
    }
  }
}

And it worked quite fine.

As it appears that Chart recently officially launched v3, I tried to upgrade it as well, as it is way better integrated with typescript than the v2 (no need for a @type import, etc.)

But there were a few hiccups during integration with plugin (I know it's still in beta). I've seen on JS files that the registration seems ok (chart_js.Chart.register(zoomPlugin);), but to in fact have it to work properly I had to also register it on my side:

Working code on Chart.js 3.0.2

import { Chart, ChartData, ChartDataset, ChartOptions, registerables } from 'chart.js';
import * as ChartZoomPlugin from 'chartjs-plugin-zoom';

Chart.register(...registerables, ChartZoomPlugin.Zoom);

{some code}

options: {
  plugins: {
    zoom: {
      pan: {
        enabled: true,
        mode: 'x',
        rangeMin: { x: 0 },
        rangeMax: { x: 100 }
      },
      zoom: {
        enabled: true,
        mode: 'x',
        rangeMin: { x: 0 },
        rangeMax: { x: 100 }
      }
    }
  }
}

Is it really the intended use/workaround to make it work in a Typescript way? The register part I mean

I got this during the diagnostics from the Chrome Lighthouse.

Consider marking your touch and wheel event listeners as passive to improve your page's scroll performance. Learn more.

The pan functionality in the basic sample https://www.chartjs.org/chartjs-plugin-zoom/samples/basic.html does not work in Chrome (v107, v108) it does work in Firefox. (this is under Ubuntu 20.04 amd64 running in VirtualBox under Windows 10)

It also doesn't work in my code which uses

• "chart.js": "^4.0.1"
• "chartjs-plugin-zoom": "^2.0.0"
• "hammerjs": "^2.0.8"

Hi,

When zooming on mixed charts, scales may be unsynchronized. For example, if I have 2 scales :

• x1: scatter data on linear scale ;
• x2: bar data on category scale.

When zooming, x1 will be zoomed smoothly, while x2 will be zoomed step by step (bar will not be show partially, it will either be shown in full or not shown).

Therefore, if I have points at positions (0;2), (0.5;2), and (1;2) as well as a bar that is supposed to be in the [0;1[ abscissa range, the points should be respectively at the start, middle, and end of the bar (in the x direction). However, when zooming this may not be the case, as the zoom process is different between the 2 type of scales.

I think an option should be added in order to specify the zoom behavior on category scales in order to enable them to be shown partially, therefore enabling to synchronize charts with multiples scales.

Temporary what would you recommend me to do in order to synchronize this 2 scales while zooming (or panning).

Cordially,

When using the grace option (options.scales[scaleId].grace) on the y axis, zooming and dezooming will not keep the correct aspect ratio of the y-scale and make the curve look flatter and flatter. Here’s a simple jsfiddle example: https://jsfiddle.net/n9j5gho1/

With chart.js(4.0.1) getting this error - Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in D:\node_e_modules\chart.js\package.json

I'm not sure if this is an issue with the zoom plugin or with my MKWebView setup in SwiftUI but I made a chart that works everywhere except in MKWebView. If instructions for MKWebView could also be included somewhere that would be good, otherwise if it doesn't work I'm alerting a bug. https://stackoverflow.com/questions/74344519/the-chart-js-zoom-and-pan-plugin-is-not-working-in-wkwebview