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.

Should calling chart.update() after modifying annotation options trigger changes?

See original GitHub issue

I’m trying to change the line annotations I’ve created with updates to the datasets. Is it possible to modify the annotation options in place and then observe changes after chart.update()? I’m not currently seeing this but may be doing something wrong or should be replacing the chart.options.annotation object completely.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:12 (2 by maintainers)

github_iconTop GitHub Comments

32reactions
veggiesauruscommented, Apr 3, 2018

I had some trouble with getting the options to propagate correctly, but in the end, this worked for me:

chart.annotation.elements['my-annotation-id'].options.value = newValue;
chart.update();

See this jsfiddle for an example. [Note that this is actually a test for a PR I’ve worked on, so don’t expect chart.render() to update annotations until #116 is merged]

2reactions
frederikheldcommented, Mar 7, 2020

For everyone who’s fiddling around with this like me: It’s also possible to update the content of an annotation label in the same way 😃

// update data:
myChart.data.datasets = formatChartData(newData)

// update mean annotation:
myChart.annotation.elements['mean-value'].options.value = calculateMean(newData)
myChart.annotation.elements['mean-value'].options.label.content = 'mean = ' + Math.round(calculateMean(newData) * 100) / 100

// re-render chart:
myChart.update()

In this example I’m drawning an horizontal line that shows the mean value of a bar chart.

chartjs_mean

Read more comments on GitHub >

github_iconTop Results From Across the Web

why do we have to use @Modifying annotation for queries ...
Doing so triggers the query annotated to the method as an updating query instead of selecting one. As the EntityManager might contain outdated ......
Read more >
Spring Data JPA @Modifying Annotation
The @Modifying annotation is used to enhance the @Query annotation so that we can execute not only SELECT queries, but also INSERT, UPDATE,...
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 >
Implementing Bulk Updates with Spring Data JPA
Updating a huge number of entities with Spring Data JPA is often inefficient. But there are 2 simple ways to create effiicient bulk...
Read more >
Chart Development Tips and Tricks
The required function allows you to declare a particular values entry as required for template rendering. If the value is empty, the template...
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