chartjs / chartjs-plugin-zoom Goto Github PK
View Code? Open in Web Editor NEWZoom and pan plugin for Chart.js
License: MIT License
Zoom and pan plugin for Chart.js
License: MIT License
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.
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
The correct install command is:
npm install chartjs-plugin-zoom --save
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 :-)
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!
Would it be possible to create a new release?
(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):
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);
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.
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.
Could you push the new release to npm?
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,
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
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?
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, 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.
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.
We'd like to use some of the new dragging zoom functionality: could you create a new release?
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);
Can I somehow set limit on min and max values on the x axis so user couldn't pan beyond the 0 ?
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.
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 have an issue with paning and zooming chart.
http://oi67.tinypic.com/jb2ys4.jpg
Regards.
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!
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?
Chart.Zoom.js causes the bottom half of points and lines at the bottom of a graph to be cut off.
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.
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.
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.
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.
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
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?
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
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.
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?
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
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
.
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:
Hey, good job for this feature :).
Is the plugin stable/production ready?
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/
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 :)
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.
(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.
I want to use Chart.Zoom.js to zoom / pan Chart.js charts in mobile devices. Is this currently possible?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.