Vue-chartjs: Uncaught TypeError: Cannot read property 'transition' of null

[nwaughachukwuma]

Hi @apertureless I am using this package for my data viz platform. The pie chart on load does not show but gives the error message _Uncaught TypeError: Cannot read property 'transition' of null_ in my console. But when I try to click another chart, the chart comes up. What it this transition property? and how can I solve the problem?

[apertureless]

Can you provide a codepen or jsfiddle for reproduction?
Seems to be a problem with chart.js.

[apertureless]

closed due to inactivity

[carlHandy]

I'm having this same issue now

[apertureless]

Well, ...

Can you provide a codepen or jsfiddle for reproduction?

[ruthqv]

EDIT: My problem is solved, it was something related with option props, I don´t know yet more, but I will follow investigate, but for now is solved

Hi, I am having same issue, when I try to rebuilt the dataset in chartData prop for my charts. Especifically you can find where my problem is here https://github.com/ruthqv/graphconverter/blob/master/resources/assets/js/App.vue
from line 188 to 216
I don´t know exactly where or how is working the transition prop with the datas,, but the chartData prop is generated in the same way than the default chartData prop that I use by default, and this second one works without problems

[indivisual]

Same issue here. Please, @ruthqv , could you please explain how did you solve it?

[AlexanderZanin]

I have the same issue. And it really seems to be the problem with Chart.js ( similar issue: https://github.com/chartjs/Chart.js/issues/5149#issuecomment-364111389 )
In my case it occurs when I fetch the data for the chart from the server.
The easiest, but not the smartest way is to hide the chart before the data will be fetched. After the data is changed, the chart will be shown.

[apertureless]

I guess the problem is related to async api calls and a mismatch of labels.length and datasets.data.length.

You basically should always add a v-if="loaded" or something to your chart, so it's only displayed after the api call completed.

```js

async fetchData () {
this.loaded = false
try {
this.chartData = await axios.get('.....')
this.loaded = true
} catch (err) {
console.error(err)
}
}

[Radiergummi]

Happens to me, too, but with static data. I'm planning on integrating vue-chartjs in a rather large ERP application, so I set up a simple vue-cli project with the webpack template. All chart data comes from a static JS object for testing, I didn't even implement any AJAX yet.
Stack trace as follows:

core.controller.js?821b:587 Uncaught TypeError: Cannot read property 'transition' of null
  at Chart.transition (core.controller.js?821b:587)
  at Chart.draw (core.controller.js?821b:558)
  at Chart.render (core.controller.js?821b:531)
  at Object.callback (helpers.core.js?de7d:85)
  at Object.advance (core.animation.js?eab3:131)
  at Object.startDigest (core.animation.js?eab3:104)
  at eval (core.animation.js?eab3:86)

As it looks to me, the chart renders nice and clean, but if you hover some data points, something seems to go wrong while rendering the tooltips. That results in the chart disappearing. I can't reproduce it yet, but I'll try to see what I can come up with.

[Heartz66]

This error occurs when you just initialized the graph and overwrite the dataset almost immediately after you have initialized the graph (e.g., initializing the graph with empty dataset and sending an HTTP request to get a dataset from the server).

I was able to solve this error by completely disabling the animation in the options. My graph options:

var options = {
    responsive: true,
    maintainAspectRatio: false,
    animation: {
        duration: 0
    },
    hover: {
        animationDuration: 0
    },
    responsiveAnimationDuration: 0
};

[SkyNetRu]

I get this error when tried to add datasets one by one, with push() method. Solve this by change all chartData.data for one action

This works for me:

data.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
data.datasets.forEach(function(dataset, key) {
        data.datasets[key].fill = false;
        data.datasets[key].borderColor = color[key];
      });
chartData.data = data;

hope it helps somebody

[dokaron]

i had the same issue. I used cloneDeep to create a new Object. Then it worked.

[ElectroBuddha]

I had similar problem when writing Jest tests for my chart components, and solved it by installing jest-canvas-mock.

[aminsbd1]

I guess the problem is related to async api calls and a mismatch of labels.length and datasets.data.length.

You basically should always add a v-if="loaded" or something to your chart, so it's only displayed after the api call completed.

async fetchData () {
  this.loaded = false
    try {
     this.chartData = await axios.get('.....')
     this.loaded = true
    } catch (err) {
      console.error(err)
    }
}

THANKSS!!! Worked!

[henon]

The error also goes away if you call upate() on the chart instance after changing chartData.