Posted in Uncategorized

Cannot read property ‘transition’ of null

   February 23, 2021  5 Comments on Cannot read property ‘transition’ of null

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,
chartjserr
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'.
					}
					}]
				}
			}
          
        });    
  }

Author: Fantashit

5 thoughts on “Cannot read property ‘transition’ of null”

  2. 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

  4. 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
};

Comments are closed.