Chart.js not able to re-set data

Question

I'm trying to create the chart first and set the data to it later. When I now try to re-set the data it always gives me: ERROR TypeError: "me.getDatasetMeta(...).controller is null" .

So my first thought was that my data is messed up but strangely enough everything works when I create the chart with my data inside it.

Here is how I create my Chart:

this._graph = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [],
    datasets: []
  },
  options: {}
});

and here I reassign it:

this._graph.data.labels = Object.keys(data);
this._graph.data.datasets = dataSets;

What my data looks like:

Object.keys => Array(6) [ "1", "2", "3", "4", "5", "6" ]

dataSets => (6) […]
​
0: {…}
  _meta: Object [ {…} ]
  data: (4) […]
    0: 157
​​​    1: 157
​​​    2: 157
​​​    3: 157
​​    length: 4
​​​    <prototype>: Array []
​​  label: "1"
​​  <prototype>: Object { … }
​1: Object { label: "2", data: (4) […], _meta: Object(1) }
​2: Object { label: "3", data: (4) […], _meta: Object(1) }
​3: Object { label: "4", data: (4) […], _meta: Object(1) }
​4: Object { label: "5", data: (4) […], _meta: Object(1) }
​5: Object { label: "6", data: (4) […], _meta: Object(1) }
​length: 6
​<prototype>: Array []

Maybe I should also let you know that I'm designing an angular app but this should not matter... I think?

Edit:

And yes, I checked if ctx is defined which it is.

Answer 1

If you want to update your chart there is an update method this.chart.update();

this._graph.data.labels = Object.keys(data);
this._graph.data.datasets = dataSets;
this._graph.update();

Answer 2

im working on vuejs and get the same error and my solution was just first call the datasets and then the renderChart so try this:

this._graph.data.datasets = dataSets;
this._graph.data.labels = Object.keys(data);