Chartjs-plugin-zoom causes JS to fail when used

[dclark3774]

Hey maintainers :)

I am working with Chart.js and Chartjs-plugin-zoom to display a historical trend of up to 19 datasets using Flask. I got it all working with chart.js, and the moment I add in the plugin I get these errors in my HTML page.

Uncaught TypeError: t.merge is not a function
at m (chartjs-plugin-zoom.min.js:11)
at Object.beforeInit (chartjs-plugin-zoom.min.js:11)
at Object.notify (chart.js:12)
at t.initialize (chart.js:11)
at t.construct (chart.js:11)
at new t (chart.js:12)
at (index):77

(index):63 Uncaught TypeError: Cannot read property 'data' of undefined
at update_values ((index):63)

The odd thing is the moment I remove the plugin script from my HTML, the code works perfectly. I am not sure if this is a bug or there is something I am missing here. Here are my initial script includes:

<script src="public/momentjs/moment.js"></script>(version 2.29.1) <script type="text/javascript" src="public/chartjs/chart.js"></script> (version 3.2.0) <script type="text/javascript" src="public/hammerjs/hammer.js"></script> (version 2.0.7) <script type="text/javascript" src="public/chartjs/chartjs-plugin-zoom.min.js"></script> (version 0.7.7) <script type="text/javascript" src="public/jquery/jquery-3.5.1.min.js"></script>(version 3.5.1)

Chart.js Options:

options: {
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x'
},
zoom: {
enabled: true,
mode: 'x'
}
}
},
legend: {
labels: {
filter: function(item, chart) {
return !item.text.includes('unused');
}
}
},
responsive: false,
scales: {
xAxes:[{
type: 'time',
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}

Code to pull in the datasets:
function update_values() {
$.getJSON(window.location.href + 'data',
function(data) {
datasets=data.datasets;
labels = data.labels;
});
for (i = 0; i < datasets.length; i++){
myChart.data.datasets[i].data = datasets[i];
myChart.data.datasets[i].label = labels[i];
};
for (j = datasets.length; j < 19; j++){
myChart.data.datasets[j].label = 'unused';
};
myChart.update();
};

[kurkle]

v0.7.7 is for chart.js v2. You need to use a prerelease with v3

[dclark3774]

Okay got it. thanks! I downgraded my Chart.js and this error still populated. I am now running Chart.js 2.6.0

Had some other issues which explained this comment before the edit.

[kurkle]

I'd still recommend going with chart.js v3 and the pre-release (v1.0.0-beta.5), which has a ton of issues fixed after 0.7.7
v1 of this plugin will be released soon.

[dclark3774]

Okay. I would be happy to run the pre-release, but the device I am running the code on does not have nodeJS installed and it currently cannot be installed. The way I have found to get the code to work is by downloading the JS code and keeping it in a static folder for the Flask deployment. Do you have a link for a download of the beta? Or is it only available via npm?

[kurkle]

npm packages are available in many cdn networks, for example: https://www.jsdelivr.com/package/npm/chartjs-plugin-zoom

[dclark3774]

Awesome thank you! I apologize if these are basic questions, I am new to this type of project.

I was able to get the version you reccommended installed (version 1.0.0-beta 5) and I re-upgraded my Chart.js to version 3.2.

I get no errors on the script anymore, but all of my options are no longer functioning correctly. Below is my current options setup:

options: {
legend: {
labels: {
filter: function(item, chart) {
return !item.text.includes('unused');
}
}
},
plugins: {
zoom: {
zoom: {
drag: {
enabled: true
}
}
}
},
responsive: false,
scales: {
xAxes:[{
type: 'time'
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}

[kurkle]

Looks like you have adapted version 2.x options from somewhere.
There is a migration guide: https://www.chartjs.org/docs/latest/getting-started/v3-migration.html

Main things in your options:

• legend goes under plugins
• scales configuration has changed:

scales: {
  x: {
    type: 'time'
  },
  y: {
    beginAtZero: true
  }
}

[dclark3774]

Thanks for the tips! Unfortunately I now have multiple Chart.js errors that I have been attempting to fix due to moment.js being an adapter now, as the documentation lists. And once again I am back to having the same errors that I first listed as well, but the moment.js errors seem to be the root cause.. I may post an issue on Chart.js, unless you think it would be helpful to list it here.

[dclark3774]

I now have no errors on the page, but the zoom function does not work. I have tried my options, as well as the options in the example given in the "Usage" with no results. Below is the last option version I have tried, and I do know my options are working correctly due to the time on the X Axis showing correctly. Thanks for the help in advance!

options: {
  plugins: {
    zoom: {
      zoom: {
        wheel: {
          enabled: true,
        },
        pinch: {
          enabled: true
        },
        mode: 'xy',
      }
    }
  },
  legend: {
    labels: {
      filter: function(item, chart) {
        return !item.text.includes('unused');
      }
    }
  },
  responsive: false,
  scales: {
    x: {
      type: 'time',
      time: {
        unit: "minute",
        displayFormats: {
          minute: "MM/DD/YYYY hh:mm"
        }
      }
    },
    y: {
      beginAtZero: true
    }
  }
}

[kurkle]

Those options seem to work: https://codepen.io/kurkle/pen/abJmpgZ