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.

[BUG?] How to update a chart by replacing entire data object

See original GitHub issue

Expected Behavior

According to https://github.com/chartjs/Chart.js/pull/1646,

You can now change the entire data object of the chart and then call update and the chart will work. The line sample has been update to test this behaviour. Note to whomever reviews this: please test all chart types before merging.

Current Behavior

Replacing the entire data object in a chart and calling update() on the chart, does not update the chart correctly.

Steps to Reproduce

Following the example https://github.com/chartjs/Chart.js/blob/master/samples/line/line.html I created a test.

  1. Open https://jsfiddle.net/mdt86/219hry2s/7/
  2. Click on the button REPLACE ENTIRE DATA OBJECT
  3. Verify that the chart is not updated with the new values (cfr. newDataObject), but only value[0] in the first dataset is updated (see code for reference)
  4. Check lines 132-140 reported here
			console.log(myLine.data);
			// comment out: this one would work, but I want to try a different approach (see following lines)
			// config.data = newDataObject;
			// the newDataObject does not override myLine.data object: why???
                        myLine.data = newDataObject;
			// ... but updating a single value works: why??? 
			myLine.data.datasets[0].data[0] = 1000;
			console.log(myLine.data);
                        window.myLine.update();

Context

Although modifying config.data (cfr. code above) would solve this issue, I would like to understand why calling myLine.data = newDataObject does not work. My project is indeed quite complex: I create the chart in one place, then I would like to update my chart later on in another place, by calling myLine.data = newDataObject.

Ideas are welcome!

Environment

  • Chart.js version: 2.x (2.4.0 in the test linked above)
  • Browser: Chrome

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

6reactions
simonbrunelcommented, Nov 17, 2016

Because chart.data is an alias to chart.config.data which defines only the getter, not the setter.

2reactions
micheledallatorrecommented, Nov 17, 2016

Great @simonbrunel, using

myLine.config.data = newDataObject;

works! (see line 136 in new jsfiddle https://jsfiddle.net/mdt86/219hry2s/9/)

Why is it chart.config.data and not chart.data though?

Thanks again!

Read more comments on GitHub >

github_iconTop Results From Across the Web

chart.js load totally new data - Stack Overflow
Calling update() on your Chart instance will re-render the chart with any updated values, allowing you to edit the value of multiple existing...
Read more >
Update the data in an existing chart - Microsoft Support
Select the chart, and then select Chart Design. Select Add Chart Element > Data Labels. Select the location for the data label (for...
Read more >
Updating Charts | Chart.js
It's pretty common to want to update charts after they've been created. When the chart data or options are changed, Chart.js will animate...
Read more >
Charts - Helm
After installation/upgrade of chart A a single Helm release is created/modified. The release will create/update all of the above Kubernetes objects in the ......
Read more >
D3.js - Data-Driven Documents
Updating nodes are the default selection—the result of the data operator. Thus, if you forget about the enter and exit selections, you will...
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