Update the legend object during beforeUpdate (#7528)

* Update the legend object during beforeUpdate

When the legend is updated in afterUpdate, the position is not updated
before the layout system runs. When the event that the legend position
was changed, the legend would not move to the new position in the layout
system. This causes the chart to render incorrectly because the layout
system handled the layout as if the legend was still at the original position.

The update is split into two passes to ensure that labels still update correctly
after datasets (#6968)

diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js
index 9a6b93ffb9fc4933257098c89e5e41110406d1a0..052ffab6076a65aafafac1419a5f817c5c69cba4 100644 (file)
--- a/src/plugins/plugin.legend.js
+++ b/src/plugins/plugin.legend.js
@@ -728,7 +728,10 @@ export default {
                }
        },
 
-       afterUpdate(chart) {
+       // During the beforeUpdate step, the layout configuration needs to run
+       // This ensures that if the legend position changes (via an option update)
+       // the layout system respects the change. See https://github.com/chartjs/Chart.js/issues/7527
+       beforeUpdate(chart) {
                const legendOpts = chart.options.legend;
                const legend = chart.legend;
 
@@ -738,7 +741,6 @@ export default {
                        if (legend) {
                                layouts.configure(chart, legend, legendOpts);
                                legend.options = legendOpts;
-                               legend.buildLabels();
                        } else {
                                createNewLegendAndAttach(chart, legendOpts);
                        }
@@ -748,6 +750,15 @@ export default {
                }
        },
 
+       // The labels need to be built after datasets are updated to ensure that colors
+       // and other styling are correct. See https://github.com/chartjs/Chart.js/issues/6968
+       afterUpdate(chart) {
+               if (chart.legend) {
+                       chart.legend.buildLabels();
+               }
+       },
+
+
        afterEvent(chart, e) {
                const legend = chart.legend;
                if (legend) {