Chartjs-Chart.js: Legend doesn't update on first call to chart.update()

by

0👍

✅

Issue is a bug in chart.js:

https://github.com/chartjs/Chart.js/issues/7457

Evert Timberg, the creator of chart.js replied with two potential fixes:

  1. Update to version v3.0.0-alpha where the bug had been fixed

  2. Call chart.update() twice (which may have performance issues)

Both solutions are confirmed.

v3 is in alpha and has several breaking changes – so a migration from 2.x -> 3.x may take some work.

Calling chart.update() twice of course causes some performance overhead, but on smaller examples like this, it isn’t at all noticeable.

Thank you to @etimberg of chart.js for your help!

0👍

It’s beacause your labels are not sorted initially. If you sort them when assigning the data to sortedKeys, it will work as expected.

let sortedKeys = Object.keys(chartData).sort(
  (a, b) => chartData[b][sortByCol] - chartData[a][sortByCol]
);

Please have a look at your amended code sandbox.

Leave a comment