Chart.js: Cannot read property 'transition' of null

[shehan360]

Im trying to draw a line chart using ChartJs and Agular4 that takes data from @Input.

  ngOnChanges(){
        if(this.labelY  && this.dataSet){
            console.log(this.dataSet);
            console.log(this.labelY);
            setTimeout(()=>{
                this.draw();
            },500);
        }

    }

Without the timeout,

error is generated. Any idea on resolving this issue?

Im using ChartJs 2.7.1
And Angular 4

draw(){
        if (this.mychart) {
            this.mychart.destroy();
        }
        let ctx = this.mycanvas.nativeElement.getContext('2d');
    this.mychart=new Chart(ctx,
      {type: 'line',
            data: {
                labels:this.labels,
                datasets: this.dataSet
            },
            options: {
                responsive: true,
                elements: {
                    line: {
                            tension: 0 // disables bezier curves
                    }
                },

                scales: {
                    xAxes: [{
                        type: "time",
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Time'
                        },
                        ticks: {
                            major: {
                                fontStyle: "bold",
                                fontColor: "#FF0000"
                            }
                        }
                    }],
                    yAxes: [{
                        display: true,                  
                        scaleLabel: {
                            display: true,
                            labelString: this.labelY
                        },
                        ticks: {
                            min: 0, // it is for ignoring negative step.
                            beginAtZero: true,
                            stepSize: 1  // if i use this it always set it '1', which look very awkward if it have high value  e.g. '100'.
                    }
                    }]
                }
            }

        });    
  }

[etimberg]

@shehan360 do you have a fiddle that reproduces this issue that we can use for debugging?

[shehan360]

Guys the problem arose from Angular input binding problem. Not related to ChartJs.

[marcinn]

I think this is a chart.js problem. If you do quick dataset replacement (i.e. remove then add new) during animation / transition, the exception will be raised. Occurs also for animation duration: 0

[MinChanSike]

Anyone solved for Cannot read property 'transition' of null issue?
I also getting that issue when chart data source change quickly.

[shehan360]

@MinChanSike are you getting the problem on Angular?

[MinChanSike]

no, I got in sample html page when I try to refresh data quickly.

[AwaisKazi]

I am also getting that error when I'm trying to push data into the charts.

[soumas]

Try to call mychart.update() after setting the new data... that solved the problem for me.

[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
};

[binDongKim]

chartInstance.update() solved the problem in my case.

[KimiaBashiran]

I'm using Angular and had the same problem.
I solved it by adding a ngDoCheck() to my chart and using chart.update() in the DoCheck
hope it helps!

[binDongKim]

@KimiaBashiran isn't ngDoCheck lifecycle called too many times?

[hdahle]

The "Uncaught TypeError" is still an issue,
WHat @Heartz66 suggests does not work for me. The only workaround that consistently works for me is to include chart.update() - it does not seem to matter if animation is disabled.
Fiddle here: https://jsfiddle.net/hdahle/z18ovxnk/6/

[PaulWieland]

I just encountered this problem too. I've opened a new issue since this one was closed. See https://github.com/chartjs/Chart.js/issues/6207

[henon]

as discussed in #6207, calling upate() on the chart after modifying the data solves this issue.

[DanteDX]

Try to call mychart.update() after setting the new data... that solved the problem for me.

mine was solved by this