I am trying to load the chartjs-plugin-zoom library using RequireJS. The problem I face is that this library attempts to load the ChartJS library using the module ID chart.js (as shown here) but it actually fails to load the library.

Now, as specified by RequireJS docs here:

There may be times when you do want to reference a script directly and not conform to the "baseUrl + paths" rules for finding it. If a module ID has one of the following characteristics, the ID will not be passed through the "baseUrl + paths" configuration, and just be treated like a regular URL that is relative to the document:

• Ends in ".js".
• Starts with a "/".
• Contains an URL protocol, like "http:" or "https:"

You cannot load a library with a module ID that ends with .js extension. Having followed this jtblin/angular-chart.js#147 issue, it appears to be a common problem amongst developers using RequireJS.

We'd like to use some of the new dragging zoom functionality: could you create a new release?

(split from #2 as a separate issue)

When a graph is dragged, the tick labels can overlap:

This is due to the tick min and max values beeing overriden and the first and last tick always beeing displayed.

Trying to use drag: true in graphs that they do not have DateTime type in X axis, don't work.
In your CodePen example, adding drag: true does not work as it should.

I'm kind of a beginner still to npm, gulp, etc. I'm getting this warning when installing this plug-in via npm. Ideas/comments? Thanks!

Hey, good job for this feature :).

Is the plugin stable/production ready?

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

Would it be possible to create a new release?

Hi!

Is there any easy way have another label show up in the tooltip-box?

I have some labels, one for each xxsomething, and xxsomething obviously shows up when hovering over the datapoints. Perfect. But I would like xxsomething2 to show up instead, since I'm trying to save space I want to have abbrevations in my xxsomething, and the full name in xxsomething2.
labels: ["a", "b", "c"...],
labelsOnTooltip: ["a longer line", "b long line", ...]

I rather not write my own method for this, since I suspect it has already been though of. I like to run "vanilla" as long as I can.

I'm very sorry for being such an incompetent smuck, if this is already in the documentation, but I can't find it.

/Charlie

Zoom working great buy I cant pan, this is my "options" section, everything is working except pan Im loading everything from json thats why I don't provide a jfiddle yet. No errors in console. Any idea of where I can start?
Im using:
window.myScatter = Chart.Scatter(ctx, {
Loaded scripts:
"../bootstrap/js/bootstrap.min.js"
"../js/Chart.bundle.min.js"
"../js/Chart.Annotation.min.js"
"../js/Chart.Zoom.min.js"
My options:
options: {
responsive: true,

                                hover: {
                                    mode: 'single'
                                },
                                elements: {
                                    /*point: {
                                        hitRadius:20
                                    },*/
                                    line: {
                                        backgroundColor: 'rgba(200, 0, 0 ,0)',
                                        borderWidth: 0,
                                        borderColor: 'rgba(200, 0, 0, 0)',
                                        fill: false,
                                    }
                                },
                                hoverAnimationDuration: 400,
                                stacked: false,
                                title:{
                                    display:false,
                                    //text:"bla bla bla"
                                },
                                tooltips: {
                                    enabled: true,
                                    mode: 'single',
                                    callbacks: {
                                        label: function(tooltipItems, data) { 

                                            return data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index].label1 + '\n ' +
                                            data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index].label2;

                                        }
                                    }
                                },

                                scales: {
                                    xAxes: [{

                                        position: 'bottom',
                                        gridLines: {
                                            zeroLineColor: "rgba(0,255,0,0)"
                                        },
                                        scaleLabel: {
                                            display: true,
                                            labelString: 'Minutos'
                                        }
                                    }],
                                    yAxes: [{
                                        position: 'right',
                                        gridLines: {
                                            zeroLineColor: "rgba(0,255,0,0)",

                                        },
                                        scaleLabel: {
                                            display: true,
                                            labelString: 'DC (%)'
                                        }
                                    }]
                                },

                                pan: {
                                    enabled: true,
                                    mode: 'xy'
                                },


                                zoom: {
                                    enabled: true,
                                    mode: 'xy',
                                },
                                annotation: {
                                    annotations: [{
                                        type: 'line',
                                        mode: 'horizontal',
                                        scaleID: 'y-axis-1',
                                        value: data.datasets[2].data[0].y, /*'1'*/
                                        borderColor: 'DimGrey',
                                        borderWidth: 1
                                        },{
                                        type: 'line',
                                        mode: 'vertical',
                                        scaleID: 'x-axis-1',
                                        value: data.datasets[2].data[0].x, /*'1'*/
                                        borderColor: 'DimGrey',
                                        borderWidth: 1
                                    }],

                                }

                            }

Thank you

A lot of the other charting frameworks contain the ability to zoom, but usually on a range. An example being highcharts:

http://www.highcharts.com/demo/line-time-series

This is maybe more of a questions that an issue, but was there any thought to add the ability to select a range similar to the link shown above?

I did most of the work to currently add in this functionality, but it doesn't seem to fit in nicely with how this plugin in currently setup. The min and max are calculated are based upon the use of a wheel mouse as opposed to selecting a range. I didn't know if it would be better to create a separate plugin or try to move things around in this plugin and add in an option to add in this functionality.

Chart.Zoom.js requires hammer and chart modules:

var Hammer = require('Hammer'); 
var Chart = require('Chart');

but webpack cant find it, because modules are hammerjs and chart.js. It should be:

var Hammer = require('hammerjs'); 
var Chart = require('chart.js');

or am i missing something?

Error log:

ERROR in ./~/Chart.Zoom.js/src/chart.zoom.js
Module not found: Error: Cannot resolve module 'Hammer' in /var/www/vvs/node_modules/Chart.Zoom.js/src
 @ ./~/Chart.Zoom.js/src/chart.zoom.js 2:13-30

ERROR in ./~/Chart.Zoom.js/src/chart.zoom.js
Module not found: Error: Cannot resolve module 'Chart' in /var/www/vvs/node_modules/Chart.Zoom.js/src
 @ ./~/Chart.Zoom.js/src/chart.zoom.js 6:12-28

I have been looking at implementing x axis panning for bar charts but was wondering if you were wanting a smooth pan like numerical pan or a stepped pan which jumps by one whole bar each time the pan initiates?

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.

When panning directly vertical upwards using mouse it also pans a little to the left. When panning directly vertical downwards it pans to the right. Panning directly horizontal is fine.

This can replicated by adding Chart.Zoom plugin to Chart.js\samples\scatter.html using a recent version of Chrome.

What is the proper way to setup zoom plugin with react-chartjs-2? Is it compatible?

I just ran npm install chartjs-plugin-zoom which installed the plugin and its hammerjs dependency and started configuring my chart options:

pan: {
  enabled: true,
  mode: 'x'
},
zoom: {
  enabled: true,
  mode: 'xy'
},

However this is not working. Am I skipping any step? I searched for react-chartjs-2 specific issues but found nothing. Thanks!

Chart.Zoom.js causes the bottom half of points and lines at the bottom of a graph to be cut off.

Without Chart.Zoom.js:

With Chart.Zoom.js:

I understand the reason behind it is so that the points and lines don't overflow the boundaries of the graph, but this is especially annoying if you are only using 'x' panning or drag zooming.

Could you push the new release to npm?

Hi love your project

So far I have been able to reset zoom on a button , but i would like toknow if there is a ZoomIn/Out event to call on button click .

Since alot of people use trackpads and dont have a mouse wheel i think would be nice future.

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/

Hi, I have an issue with paning and zooming chart.
http://oi67.tinypic.com/jb2ys4.jpg

Regards.

I'm removing and adding datasets that have completely different X and Y axis data. After a user zooms in, the chart doesn't reset to the new perspective. Is there a way to force a reset?

I want to use Chart.Zoom.js to zoom / pan Chart.js charts in mobile devices. Is this currently possible?

Can I somehow set limit on min and max values on the x axis so user couldn't pan beyond the 0 ?

Hi,

I was going to look at the category zoom next.
My thinking is to use a similar method to panning with a one step zoom, testing whether the mouse is left or right of centre and showing that sides bar.
For pinch zoom we could have left bar, right bar, left bar etc or check which part of the screen has been pinched (that might be difficult!)
Any thoughts would be greatly appreciated

http://blog.scottlogic.com/2014/09/19/interactive.html

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

Hello, can you please tell me how can I achieve zooming and panning only the border (lines) and not the side labels or data values. Those should remain the same size when zooming. Basically I want to zoom and pan only the area inside the red rectangle (see picture link). Is it possible ?

Hi,

I'm getting a "Uncaught TypeError: Cannot read property 'canvas' of null" when using the .destroy() method in Chart JS with the Zoom plug-in loaded.

The error comes from the first line of the destroy() method in chartjs-plugin-zoom.js, which has this code:

var node = chartInstance.chart.ctx.canvas;

Looking at the file core.controller.js of the main Chart JS, I can see the following code inside the destroy method:

if (canvas) {
helpers.unbindEvents(me, me.events);
helpers.removeResizeListener(canvas.parentNode);
helpers.clear(me.chart);
releaseCanvas(canvas);
me.chart.canvas = null;
me.chart.ctx = null;
}

Chart.plugins.notify('destroy', [me]);

Given that me.chart.ctx is nullified prior to the plugins being notified, this would seem to prevent the first line of destroy() in chartjs-plugin-zoom ever succeeding. Or am I misreading the code?

TIA :-)

Hello,

Here's an example :

http://codepen.io/anon/pen/QdGvmV

Like you can see, when panning, the zoom is automatically set to max. (even if I disable zooming).

Is this a bug or am I missing something ?

Thanks

When a user clicks a "legend square" to hide a line on the chart, ChartJS stores this in the metadata of the dataset.

When resetZoom() is called on a chart, it deletes all metadata. This causes, among other things, for the hidden metadata to be lost and the line to become visible again.

Example: http://codepen.io/albinodrought/pen/OWzqzY

To Reproduce:

1. Hide a dataset by clicking on the legend "square"
2. Click the "Reset Zoom" link
3. Notice that the dataset hidden in step 1 is now visible again

When panning, the tick intervals expand. This is most easily reproduced by creating a chart that can pan horizontally and then panning rapidly side to side. You will notice that the tick intervals expand. I do not have time to create a pull request and test thoroughly however I can offer the cause of the issue and a potential fix.

When, for example the panNumericalScale function is called, the following code calculates the bounds variables.

function panNumericalScale(scale, delta) {
    var tickOpts = scale.options.ticks;
    var start = scale.start,
        end = scale.end;

    if (tickOpts.reverse) {
        tickOpts.max = scale.getValueForPixel(scale.getPixelForValue(start) - delta);
        tickOpts.min = scale.getValueForPixel(scale.getPixelForValue(end) - delta);
    } else {
        tickOpts.min = scale.getValueForPixel(scale.getPixelForValue(start) - delta);
        tickOpts.max = scale.getValueForPixel(scale.getPixelForValue(end) - delta);
    }
}

This issue is quite easily fixed by ensuring the difference between the two bounds values is always the same.

function panNumericalScale(scale, delta) {
    var tickOpts = scale.options.ticks;
    var start = scale.start,
        end = scale.end;
    var diff = scale.end - scale.start;

    if (tickOpts.reverse) {
        tickOpts.max = scale.getValueForPixel(scale.getPixelForValue(start) - delta);
        //tickOpts.min = scale.getValueForPixel(scale.getPixelForValue(end) - delta);
       tickOpts.min= tickOpts.max - diff;
    } else {
        tickOpts.min = scale.getValueForPixel(scale.getPixelForValue(start) - delta);
        //tickOpts.max = scale.getValueForPixel(scale.getPixelForValue(end) - delta);
        tickOpts.max = tickOpts.min + diff;
    }
}

This fix is obviously simplified for illustrative purposes, but I hope you get the idea.

Sorry I can't be of more help. Maybe one day when other projects slow down.

As a side note

Chart.pluginService.register(zoomPlugin);

does not work with the latest version of chartjs. Change to

Chart.plugins.register(zoomPlugin);

Hi there,

I'm using chart.zoom.js in an ionic application. Zooming and panning works great on line charts. Thanks for that! But now I need a bar chart that has no borders.

This works great until I zoom in. Zooming in creates space between the bars. Is there a way to keep the bars connected when zoomed in?

Could you please do some more explanation about the Advanced usage > Prototype Methods like resize(). It's hard for a novice to understand all these topics.
Perhaps a small tutorial (video preferably).
Thanks!

Thank you for this plugin! Can I request reversable scrolling? For example one scroll click up then one scroll click down returns you to the original zoom (1:1). This might make for a more intuitive default also.

Also, my chart is on a large page and scrolling caused the page to also scroll, this worked beautifully to prevent that:
http://stackoverflow.com/questions/1459676/prevent-scroll-bubbling-from-element-to-window#answer-4593315.

I have built a line chart using ChartsJS, and the Zoom plugin. It all works well it Pans and Zooms nicely, however, the chart always loads with the complete range of data, I want it to start "Zoomed in" by n amount. I have tried to adjust the settings, however to no avail. Any pointers at this stage would be much appreciated.

I don't think that it causes from Browserify, it causes from somewhere it didn't connected with Chart.js, anyway this is my code:

import React, { Component, PropTypes } from 'react';
import Chart from 'chart.js/src/chart';
import 'hammerjs';
import 'chartjs-plugin-zoom';

...

const chartOptions = {
	responsive: true,
	maintainAspectRatio: false,
	type: 'line',
	backgroundColor: '#5092ce',
	data: { ... },
	options: {
		scales: {
			yAxes: [{
				ticks: {
					min: 0
				}
			}]
		},
		pan: {
			enabled: true,
			mode: 'xy',
			speed: 10,
			threshold: 10
		},
		zoom: {
			enabled: true,
			mode: 'y',
			limits: {
				max: 10,
				min: 0.5
			}
		}
	}
};

class GraphChart extends Component {
	...
	updateChart = async () => {
		const context = this.refs.chart.getContext('2d');
		const chart = new Chart(context, chartOptions);
	}
	render() {
		return (
			<div className="chart">
				<canvas ref="chart"></canvas>
			</div>
		);
	}
}

Chart.js itself working good, but when I try zoom, it just zoom the screen, not the chart! I checked hammer.js and chartjs-plugin-zoom modules were loaded, but it just not worked.

I tried with different types of chart, like 'bar', it wasn't worked at all. Also documentation is too lack of informations, you better to add some more information like collaborate with Webpack or Browserify something, I guess.

I checked that this module actually exposes some methods but there is no information about this and I'm quite confusing.

(Split from #2 since it's not certain if the cause is the same)

Sample html code:
https://gist.github.com/jachstet-sea/956ae41702a7487502996285387ec16b

Original (after reload - straight lines):

After panning the lines are curved (the one on the left more than the other, but both are):

I use time scale and I enabled both pan and zoom for the horizontal scale only.

When I zoom in a lot, at the point where there are no more ticks on the horizontal scale, an error is raised in Chart.js, in method getLabelMoment. Here is the callstack:

Uncaught TypeError: Cannot read property 'null' of undefined
    getLabelMoment @ Chart.js:9931
    getPixelForValue @ Chart.js:10182
    getPixelForTick @ Chart.js:10205
    calculateTickRotation @ Chart.js:6769
    update @ Chart.js:6644
    getMinimumBoxSize @ Chart.js:5773
    helpers.each @ Chart.js:4611
    update @ Chart.js:5766
    update @ Chart.js:3917
    doZoom @ Chart.Zoom.js:114
    wheelHandler @ Chart.Zoom.js:198

I guess that since this is not a situation that normally occurs in Chart.js, there are no protections in method getLabelMoment.

I do not see other options than doing a pull request in Chart.js. What do you think?

The correct install command is:
npm install chartjs-plugin-zoom --save

After the Chart.js 2.2.1 update the zoom functionality with the mouse scroll also scrolls the page.

Noticed also in the zoom.html of your samples directory. I can reproduce it in a jsbin if you prefer.

Also I think I found a way to prevent this in your code. If you confirm the bug I can prepare a PR.

I want to be able to register this plugin with my own instance of Chart, which is not named Chart in my case. i.e. I want:

import Chart2 from 'chart.js';
import zoomPlugin from 'chart.zoom.js';

Chart2.pluginService.register(zoomPlugin);

Hello,

I'm currently working on a dashboard using chartjs. I have several charts displayed on the same page and the zoom plugin applies only to one of it. Is multiple chart support not implemented yet or did I do something wrong?

Thanks for your future answer.

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, thanks for implementing this feature!
However, there is a problem with the lines in the scatter graph at the edge of the chartArea when panned and/or zoomed. This can be observed with the "zoom.html" sample: When the graph is dragged around, the lines at the edge are beeing bent. This might not be too bad with bezier curves, but straight lines turn into curves which might not be desired.

Hello,

I don't know if it a known issue but I can not Drag to Zoom using Firefox.

Heres an example: http://codepen.io/anon/pen/GrQemG

When running on Chrome the zoom works but if you run it on Firefox it doesn't.

My firefox version is 51.0.1+build2-0ubuntu0.16.04.1

There is something that I can do to make it work on both Firefox and Chrome?

Kind regards and thank you for the plugin

Is there any plan to implement Zoom to Mouse Cursor functionality?

Currently zoom, zooms to middle of plot.

The plugin is passing an argument named 'center' to the zoom functions which could be used to pass mouse pointer coordinates and calculate axis min and max etc which will zoom to cursor.

When the canvas element is offset usings margins/padding the "selection" you make while drag zooming becomes inaccurate.

This is the zoom-time sample page with the body's left margin set to 100: