70 questions
0
votes
0
answers
12
views
Graph shrinks after resize() when pointRadius is positive
I encountered an issue where the size of the chart changes unexpectedly when the pointRadius of a dataset is modified. Here's a minimal explanation of the behavior:
Initial state: I initialize a ...
- 1
0
votes
0
answers
64
views
Chart.js Panning Not Working in ASP.NET MVC Application Using chartjs-plugin-zoom
I'm developing an ASP.NET 8 MVC application where I'm using Chart.js to display two real-time line charts: one for "Penetration Depth" and another for "Hydrophone Audio Levels." I’...
- 1
0
votes
0
answers
159
views
Chart.js 2.9.3 - Issues with time-based charts and zooming
I have a problem with chart.js 2.9.3.
The program is quite simple:
You must choose a time period
You must choose whether the X axis will be spatial (kilometers) or temporal (dates)
You must choose ...
0
votes
1
answer
55
views
How to restrict the zoom area to be inside chartArea
I am trying to use the zoom within chartArea, however zooming in causes the zoom to use the whole chartArea rather than within the X and Y axes.
var arbitraryLine = {
...
- 245
0
votes
1
answer
56
views
ChartJs tooltip is only visible if the mouse pointer is hovered away from the chart
ChartJs tooltip is only visible if the mouse pointer is 10-20 pixels away from the point.
Please see the image below. The tooltip only appears when the pointer is not on the chart. There is nothing ...
- 673
0
votes
0
answers
74
views
Zooming in/out does not accurately use the mouse position
Whenever I am zooming in/out it displaces the mouse cursor and it does not actually zoom in where I put my mouse
Using a BarChart
Using: "chartjs-plugin-zoom": "2.0.1"
I tried ...
- 1
0
votes
1
answer
285
views
How to use chartjs-plugin-zoom in laravel
I am trying to use the functionality of chartjs-plugin-zoom in my laravel application but I cant't get it to work.
In the blade I am loading the plugin through Cloudflare cdnjs:
<script src="...
- 87
1
vote
1
answer
510
views
Using Hammer + chart + chart plugin zoom not work in mobile
I am encountering an issue with the drag functionality on mobile devices in a Chart.js chart that utilizes the chartjs-plugin-zoom and hammer.js. The chart works as expected on desktop browsers, but ...
1
vote
0
answers
192
views
Button for enable or disable zoom and pan utils using chartjs, react-chartjs-2 and chartjs-plugin-zoom
Im trying to create a button for enable or disable zoom and pan options in my chart.
Part of my code
import { useRef, useState } from "react"
import { Line } from "react-chartjs-2"
...
- 11
0
votes
0
answers
56
views
ChartJS - mark multiple regions on chart
Please advise,
i have ChartJS graph (4.4.1) which has X of 'time' type. I need somehow to select 3 periods on X axe.
I'm thinking of some trigger (checkbox) for activating each period selecting, so ...
- 807
1
vote
1
answer
546
views
Chartjs Zoom Plugin - Default scroll behaviour not working
In my project, I have implemented a bar chart using Chart.js. The chart allows users to scroll to view the amounts for the previous months over the last two years. To enable panning on the x-axis and ...
- 15.4k
4
votes
4
answers
1k
views
Chartjs plugin zoom Reference error: window is not defined
In Nextjs application while I'm run the command for build and export there was an ReferenceError
I've attached the screenshot for your reference..
When remove the import of chartjs-plugin-zoom from ...
1
vote
0
answers
161
views
Blazor server app can't use Chart JS zoom plugin
I tried to add to Blazor Server app graphs by using ChartJS. I used tutorial after some tweaks it started to work but no luck with plugin zoom.
I have used .Net 7.0, ChartJS 4.4.0 and zoom plugin 2.0....
- 21
0
votes
0
answers
151
views
Chartjs-plugin-zoom drag option doesn't work
Using Chart.js with chartjs-plugin-zoom and chartjs-plugin-streaming the drag option shows the selected area but doesn't resize.
The wanted effect is to select a specific area and view only the ...
0
votes
1
answer
234
views
SvelteKit: chartjs-plugin-zoom not working
Sample code:
<div>
<canvas id="example"></canvas>
</div>
<script>
import { onMount } from 'svelte'
import Chart from 'chart.js/auto' // Version 4....
- 1,271
0
votes
0
answers
48
views
y value is overlapped by yellow box regions that I have defined in chart js
Currently, when the data points lie within the box region demarcated by the Lower Specification Limit (LSL) and Lower Control Limit (LCL), they are overlapping with the yellow shaded area that ...
- 1
1
vote
3
answers
70
views
Not able to hide the (indicator) box which is next to the label in Line Graph
If there is no value in graph API response, then graph should not be plotted and also all the legends/label should be hidden
(Multiple y-axis)
When there is no value in y-axis, I am able to hide the ...
- 29
0
votes
0
answers
217
views
X-Axis decimal places displayed using chartjs-plugin-zoom
When zooming in (both x&y set) the x-axis labels that are defaulted to 1 decimal place using Chart.config._config.options.scales.xAxis.ticks.precision = 1; will show 14 digits on the first and ...
- 1
1
vote
0
answers
516
views
How to dynamically change the tick spacing of x-axis of a timeseries in chart.js when zooming enabled?
I have a chart that is based on 5-minute resolution data. If a user chooses to display 5 days worth of data, I want the x-axis to update from a "day" format like 'Jan 1' to more granular ...
- 596
1
vote
0
answers
236
views
(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 ...
- 11
0
votes
0
answers
713
views
Chartjs add custom plugin to existing chartjs-plugin
I'm trying to add a custom plugin in addition to chartjs-plugin-zoom, but I failed to understand how to put the zoom plugin configs outside of the plugins object nor could I use the custom plugin on ...
- 93
-1
votes
1
answer
907
views
Why Zoom plugin is not working of chart js?
This code creates a line chart using Chart.js to display Nifty PCR COI and Bank Nifty PCR COI data that is being fetched from a Google Sheets spreadsheet. The chart is shown in a canvas element and ...
0
votes
1
answer
528
views
Svelte-ChartJS chart binding
I am trying to use svelte-chartjs with chartjs-plugin-zoom. In order to programmatically adjust zoom. In order to do this you have to bind onto the element. This can be illustrated in the React-...
- 3,281
2
votes
1
answer
1k
views
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 ...
- 184
1
vote
1
answer
1k
views
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 ...
- 1,092
2
votes
0
answers
174
views
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in D:\node_e_modules\chart.js\package.json
When using chartjs-plugin-zoom(2.0.0) with chart.js(4.0.1) in Next.js getting this error - Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in D:\node_e_modules\chart.js\...
- 33
2
votes
1
answer
1k
views
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 ...
- 53
0
votes
1
answer
195
views
Changing Chartjs Horizontal Scrollling Direction
I would like to change the direction of scrolling on a horizontal scrollable bar chart in such way scrolling start from right to left (RTL). I'm not sure if it is supported or not. in case, it is not, ...
- 89
1
vote
2
answers
5k
views
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 ...
2
votes
3
answers
1k
views
Charts how to find local bounds of a zoomed chart
I have been using chartjs with plugin chartjs-plugin-zoom and I couldn't find a way to get local min and max values of x,y axis. While I zooming in how can I get these bounds.
For example, I know the ...
- 259
2
votes
3
answers
2k
views
ChartJs: How to pan programmatically by time values (instead of pixels)
I'm using chartJs 3.6.1; and chartjs-plugin-zoom 1.2.1 (but I think it's not really matter :))
I have 2 timeseries line chart, and when I panning one chart via drag&drop, I want to move/pan the ...
- 83
2
votes
1
answer
2k
views
chart.js v3 - data decimation not working with zoom plugin
In chart.js v3 data decimation doesn't work when zooming in via the zoom plugin.
Initially at 100%, data decimation works, but if I zoom in it's no longer working (i.e. shows all points)
If I zoom out ...
- 482
1
vote
2
answers
2k
views
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 ...
- 439
1
vote
1
answer
1k
views
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 ...
- 75
1
vote
2
answers
1k
views
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 ...
- 13
0
votes
1
answer
624
views
Cannot zoom in Chart.js
I created some chart in MVC with chart.js without issue Now I want to implement zoom in a Line chart following this example
In my layout page I added:
<script src="https://cdn.jsdelivr.net/...
- 149
2
votes
1
answer
643
views
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.
...
- 31
2
votes
1
answer
1k
views
Chart.js find visible data points following zoom
I am trying to find the currently visible data points following a zoom event using chartjs-plugin-zoom. Following examples I came up with the following onZoomComplete callback, but it is not working.
...
- 21
2
votes
1
answer
4k
views
How to set up an initial Zoom value for a chart (ChartJS + ChartJS Zoom plugin)?
I am trying to create a chart that has data for the last 30 days. But I would like to set up the initial Zoom value for the small screen sizes. So, the chart would display on mobile not all 30 values ...
- 21
1
vote
1
answer
3k
views
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 ...
- 413
3
votes
1
answer
7k
views
chartjs-plugin-zoom not working with my React project
I have a react component using the 'react-chartjs-2' library to show some data.
The chart with the data works fine. What I cannot do is make the chart work with the 'chartjs-plugin-zoom' plugin. I am ...
1
vote
0
answers
714
views
Won't able to zoom after including chartjszoom in chartjs
Failed to zoom after include the correct version of chartjs and chartjs-plugin-zoom.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
...
0
votes
1
answer
384
views
Chart.js v3 after using of zoom plugin instance persist in memory
I recently switched Chart.js from v2.x to 3.x. I also use the chartjs-plugin-zoom 1.0.1 which is compatibile with version v3.x. My situation is this I have SPA with some tabs, on one tab are the ...
- 873
1
vote
0
answers
232
views
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 ...
- 11
1
vote
1
answer
2k
views
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 ...
-1
votes
1
answer
289
views
How to show xaxis lable o only data point and hide all others?
I have a chartjs line chart requirement where the client is asking to show labels on x axis only if it has a data point. please find his mockup below.
the x-axis is time and here is what I am getting....
4
votes
1
answer
689
views
chartjs-plugin-zoom: separate x- and y-axis zoom when mouse above axis
With chartjs-plugin-zoom-plugin for ChartJS I am trying to separate x- and y-axis zoom when the user scrolls above an axis. I can not get this working and I am now wondering if this might not be ...
- 117
0
votes
1
answer
232
views
Chart.js: Can I change the "OriginalOptions" variable within the chartjs-zoom-plugin?
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....
- 67
1
vote
1
answer
7k
views
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 ...
- 3,192
1
vote
0
answers
442
views
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 ...
- 172