From 537cd749192a211225414804ba0f38a2c6f1811c Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sat, 20 Jun 2020 07:30:31 -0400 Subject: [PATCH] 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) --- src/plugins/plugin.legend.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index 9a6b93ffb..052ffab60 100644 --- 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) { -- 2.47.2