Questions tagged [chartjs-plugin-zoom]
63 questions
1
vote
0 answers
(chartjs migration v2 -> v3/4) a point outside the graph is not connected by a line
I migrated from version 2 to 4. The graph does not draw lines to points that are outside the graph. I use the plugin chartjs-plugin-zoom.
I am using spanGaps for to link points. But points outside the graph does not work.
you see old version and new…
Kraken7
- 11
- 2
1
vote
1 answer
Chartjs: Set minimum value for zoom on drag and proper user feedback
I am using Chartjs 4.0.1 and chartjs-plugin-zoom 2.0.0 and my chart look like this:
I have set the drag option to be enabled so the user can draw a rectangle to zoom in. Also I have set the zoom mode to 'x'. So the user can only zoom in on the x…
hemmoleg
- 125
- 1
- 8
1
vote
1 answer
vue chartjs zoom reset
I am trying to use chartjs-plugin-zoom to implement zooming on a chart using vue-chartjs. With the code below, I get a this.$refs.myChart.resetZoom is not a function error. How do I correctly get a reference to the chart so that I can call the…
Software Dev
- 910
- 3
- 10
- 27
1
vote
0 answers
Chartjs - improve performance for line charts with many (hundreds) datasets
I am using chart.js and chartjs-plugin-zoom to produce a real-time zoomable, pannable line graph containing around 200-400 datasets, each with anywhere from 10-50 data points. Needless to say, the chart contains thousands of points in total and…
jonah0
- 23
- 7
1
vote
2 answers
Chartjs with zoom plugins, how to set limit data show on chart
I work with Angular v13 and chartjs v3, I also install chartjs-plugin-zoom, it works perfect for bar chart, but for the time bar chart, it does not work as expected, here is my problem:
When I get data from api, example 50 records in 24hours and I…
Khánh Trần Hoàng
- 3
- 3
1
vote
2 answers
ChartJS zoom/pan onPan event not firing in React useEffect hook
I've run into an issue with ChartJS's Pan/Zoom plugin event onPan not firing when the Chart configuration is assigned from inside of a useEffect hook. I am listening to the pan & zoom event and firing an event bus accordingly to synchronize multiple…
Jacob
- 409
- 6
- 22
1
vote
1 answer
How to do automatic pan with Chart.js
I'm using chart.js to plot data in real time. Currently, as new data points come in and are drawn, the old ones remain which increases the amount of points chart.js has to plot every iteration. I'd like to have a maximum number of visible points,…
Paul Côté
- 75
- 1
- 10
1
vote
2 answers
onZoom not triggered when zooming
I have made a line chart using react-chartjs-2 with a plugin called chartjs-plugin-zoom. I want to display the zoom level in console when zooming the chart. However, the onZoom seems not being triggered or called when zooming as I can't see any…
kin
- 13
- 5
1
vote
1 answer
ChartJS Zoom Granularity
The data I'm working with has a 'floor' granularity of 'Days'. Anything more fine-grain (e.g. hours) does not make sense. However the ChartJS plugin allows the user to keep zooming to finer scales.
How can I detect that the zoom level has now hit…
Simon Rubin
- 11
- 3
1
vote
1 answer
How to include adapters and plugins with ChartJS
What is the most up to date (ES6) and minimal way to use Chart.js with time series data (requiring an adapter like moment.js) and zoom/pan capabilities (chartjs-plugin-zoom) using only CDN? Do you have to use require or import?
The code below will…
Mick
- 413
- 4
- 14
1
vote
0 answers
Won't able to zoom after including chartjszoom in chartjs
Failed to zoom after include the correct version of chartjs and chartjs-plugin-zoom.
servedwithbutter
- 11
- 1
1
vote
0 answers
X-axis scale is not in sync with graph while zoom in/out and panning using chartjs/chartjs-zoom plugins
charjs-zoom-plugin version: 0.7.7 and chartjs-2.9.2
while doing zoom in/out(using the scroll bar) and panning(mouse drag), the x-axis scale is scaling the opposite direction as compared to the graph moving direction.
any idea why it behaves like…
Chetankumar
- 11
- 1
1
vote
1 answer
How to stop chartjs zoom more than visible points?
Can i limit chartjs to stop zooming if there are no points in selected area? Please find the image below.
As you can see, there is one month gap between two points on xaxis and if I try to zoom in there, it goes on and on.
Find the image below.
I…
The Lost JavaScripter
- 221
- 3
- 11
1
vote
1 answer
Chartjs doughnut chart rounded corners for half doghnut
I am using chartJS library for one of my projects and I need to draw a doughnut chart. The doughnut chart needs to be a half circle and the sections in it needs to have rounded edges, something like shown below
I could achieve the same for a full…
Vikhyath Maiya
- 3,122
- 3
- 34
- 68
1
vote
0 answers
How to pan on the click of a button?
I am using react-chartjs2 for displaying a chart which I have made horizontally scrollable by using the chartjs-plugin-zoom. I want to pan on the chart not by dragging the mouse but by the click of the button. I have checked the code of the plugin…
Farrukh Rashid
- 185
- 1
- 9