Chart.js: [BUG] TypeError: Cannot read property of '_meta' of undefined

Expected Behavior

No error occurs.

Current Behavior

A linear chart is continuously updated every couple of seconds by assigning to it’s datasets and labels property before calling the update method using the following code:

const chartData = chart.data as LinearChartData;
chartData.datasets = newData;
chartData.labels = labels;
chart.update(0);

After some hours of normal behavior an exception occurs in production:

TypeError: Cannot read property '_meta' of undefined
    at t.getDatasetMeta (https://localhost/vendor.bundle.js:1:236168)
    at t.updateHoverStyle (https://localhost/vendor.bundle.js:1:237714)
    at t.handleEvent (https://localhost/vendor.bundle.js:1:238496)
    at t.eventHandler (https://localhost/vendor.bundle.js:1:237904)
    at n (https://localhost/vendor.bundle.js:1:237275)
    at HTMLCanvasElement.s.(anonymous function) (https://localhost/vendor.bundle.js:1:170105)
    at e.invokeTask (https://localhost/polyfills.bundle.js:1:41200)
    at Object.onInvokeTask (https://localhost/vendor.bundle.js:1:45060)
    at e.invokeTask (https://localhost/polyfills.bundle.js:1:41121)
    at r.runTask (https://localhost/polyfills.bundle.js:1:36376)

The stack trace points toward a bug inside Chart.js.

Possible Solution

Unknown.

Steps to Reproduce (for bugs)

I was unable to reproduce it in a development environment, it only happends sporadically in production after hours of usage.

Context

The chart is used inside a monitoring application based on angular and contiuously updated. It looks like an uncaught exception inside of Chart.js, which is crashing the application.

Environment

Chart.js version: 2.6.0
Browser name and version: 62.0.3202.94
Angular Wrapper: ng2-charts 1.6.0

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 17 (4 by maintainers)

Most upvoted comments

I also sow this issue. Try don’t use ‘filter’ for data of the chart. Replace ‘filter’ to ‘map’ and add ‘hidden: true’. const datasets = data.map(d => ({ ...data, hidden: !d.active }));

+12

mashaod on Nov 7, 2019

I was able to fix it by adding the following line in node_modules/chart.js/src/core/core.controller.js

` getDatasetMeta: function(datasetIndex) {

		var me = this;

		var dataset = me.data.datasets[datasetIndex];
         //Start
		if(dataset===undefined)
			dataset={}
        //End
		if (!dataset._meta) {
			dataset._meta = {};
		}`

tharunsikhinam on Dec 2, 2018

I am facing the same issue when I pass an onClick event to legend. This is what I have done for one of my charts within my class. Can someone help?

legend:
{
   onClick: function(e, legentdItem){
      self.newLegendClickHandler(e, legentdItem)
   }
}

The name of my chart is myChart.

  async newLegendClickHandler(e, legendItem) {

    var index = legendItem.datasetIndex;
    var ci = this.myChart;

    console.log(this.myChart);    // Getting the chart here successfuly

    var meta = ci.getDatasetMeta(index);          // Error here...

    meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;

    ci.update();
  };

harshil-darji on Mar 12, 2020