[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

Author: Fantashit

3 thoughts on “[BUG] TypeError: Cannot read property of ‘_meta’ of undefined

  1. 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 = {};
    		}`
    
  2. 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 }));

  3. 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();
      };
    

Comments are closed.