question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot read property 'transition' of null

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:19 (1 by maintainers)

github_iconTop GitHub Comments

67reactions
Heartz66commented, Jun 17, 2018

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
};
26reactions
marcinncommented, Feb 8, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cannot read property 'transition' null chartjs - Stack Overflow
I have a dynamic data that is need to be put inside a for loop in order to display the data of interest....
Read more >
[Solved]-Cannot read property 'transition' null chartjs-Chart.js
Coding example for the question Cannot read property 'transition' null chartjs-Chart.js. ... Also, why cannot you loop within the constructor?
Read more >
react cannot read properties of null - You.com | The AI Search ...
The TypeError: Cannot read properties of null (reading 'checked') comes because when you first render, your checkbox with that id isn't mounted to...
Read more >
Chart.js: Uncaught TypeError: Cannot read property &#039
This problem is not caused by our product. There's something wrong with Charts or Moment libraries, that the moment is undefined error is...
Read more >
Uncaught TypeError: Cannot read property of undefined
Out of the six primitive types defined in JavaScript, namely boolean, string, symbol, number, Null, and undefined, no other type throws as ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found