chartjs / chartjs/chartjs-plugin-zoom

Zoom go to Infinity on any event on chart

Open
#818 4 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
623
Forks
331
Avg merge
7h 5m
Merged PRs (30d)
7

Description

Hy,

I get a unexpected zoom on any event on chart.
After analyse, the function getZoomLevel return 'Infinity'.

I tried many way to resolve it with set min/max, check datas, set X, set Y... not solutions.

here my simpliest JS :

```

/*********************************************************************/
/***************************** macDChart *****************************/
/*********************************************************************/
var ctx_chart = document.querySelector('#macd_chart_ADAUSD_OneHour').getContext('2d');
ctx_chart.canvas.width = 1000;
ctx_chart.canvas.height = 250;

var datas = [{x:'2024-05-05 22:00:00',y:0.000414969070996751},{x:'2024-05-05 23:00:00',y:0.00027615726125757}, ... },{x:'2024-05-06 04:00:00',y:-0.000250683582229627}];

var chart_ADAUSD_OneHour_macd = new Chart(ctx_chart, {
type: 'line',
data: {
datasets: [
{
label: 'MACD',
data: datas.filter(function (item) {
return item.y !== null;
}),
borderColor: 'blue',
backgroundColor: 'rgba(0, 0, 255, 0.2)',
borderWidth: 0.5,
pointRadius: 0,
fill: false,
}
]
},
options:
{
plugins:
{
zoom:
{
pan: { enabled: true, mode: 'x' },
sync: {
enabled: true,
group: 'my-charts'
},
zoom: {
wheel: { enabled: true, modifierKey: 'ctrl' }, pinch: { enabled: true, modifierKey: 'ctrl' }, drag: { enabled: true, modifierKey: 'ctrl' }, mode: 'x',
}
}
},
},
scales:
{
x: { type: 'time', distribution: 'series', time: { unit: 'day' }, },
y: {
type: 'linear',
display: true, position: 'left',
title: { display: true, text: 'Price'},
}
}
});

```

I attache you the image of the graph at load VS.
on load :
![graph_at_load](https://github.com/typpo/quickchart-csharp/assets/8056358/4399b241-f7e6-4dde-b8ff-b3186c3e336e)
after any event :
![graph_after_event](https://github.com/typpo/quickchart-csharp/assets/8056358/e01b6c50-cbda-4fbc-8bb3-a0c33124ca63)

Thanks in advance for your help.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the provided JavaScript example and inspect the getZoomLevel entry point, especially after a pan or zoom event. Compare the chart state before and after the event. Done means the example no longer produces an Infinity zoom level and the chart retains a finite, usable scale.

Written by the indexing model from the issue text.

Assessment

Tech stack
chart.js, javascript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.