chartjs-plugin-zoom icon indicating copy to clipboard operation
chartjs-plugin-zoom copied to clipboard

Zoom go to Infinity on any event on chart

Open M-t-t-h opened this issue 1 year ago • 4 comments

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 after any event : graph_after_event

Thanks in advance for your help.

M-t-t-h avatar Jun 07 '24 19:06 M-t-t-h

@M-t-t-h Did you find any solution for this?, I've been struggling for hours with this.

luisandIT avatar Oct 10 '24 23:10 luisandIT

@M-t-t-h Did you find any solution for this?, I've been struggling for with this. hours with this.

Hy, Sorry for this answer : no, i didn't found any solution (and for this time, i let this project by my side). If you find any solution, i'm still interested, please share !

M-t-t-h avatar Oct 11 '24 07:10 M-t-t-h

What versions of Chart.js and zoom plugin are you using? What are those sync options?

kurkle avatar Nov 17 '24 20:11 kurkle

Hy, Sorry for this answer : no, i didn't found any solution (and for this time, i let this project by my side). If you find any solution, i'm still interested, please share !

Sorry I forgot to reply. I realized that I was getting the error because I hadn't defined a 'labels' key in my data object. I was using a format like this:

data: {
    datasets: [{
      data: [{x: 10, y: 20}, {x: 15, y: null}, {x: 20, y: 10}]
    }]
  }

When I added a labels key the error disappeared. My data now looks like this:

data: {
    datasets: [{
      data: [20, 10],
    }],
    labels: ['a', 'b']
  }

I'm using chartjs 4.4.6 and zoom 2.0.1

luisandIT avatar Nov 17 '24 21:11 luisandIT