Fix updating of active elements (#9261)

chartjs · Jun 12, 2021 · 22c02ed · 22c02ed
1 parent dc373f3
commit 22c02ed
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 6 deletions.
diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
@@ -290,7 +290,7 @@ export default class BarController extends DatasetController {
       };
 
       if (includeOptions) {
-        properties.options = sharedOptions || me.resolveDataElementOptions(i, mode);
+        properties.options = sharedOptions || me.resolveDataElementOptions(i, bars[i].active ? 'active' : mode);
       }
       me.updateElement(bars[i], i, properties, mode);
     }

diff --git a/src/controllers/controller.bubble.js b/src/controllers/controller.bubble.js
@@ -86,7 +86,7 @@ export default class BubbleController extends DatasetController {
       properties.skip = isNaN(iPixel) || isNaN(vPixel);
 
       if (includeOptions) {
-        properties.options = me.resolveDataElementOptions(i, mode);
+        properties.options = me.resolveDataElementOptions(i, point.active ? 'active' : mode);
 
         if (reset) {
           properties.options.radius = 0;

diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js
@@ -186,7 +186,7 @@ export default class DoughnutController extends DatasetController {
         innerRadius
       };
       if (includeOptions) {
-        properties.options = sharedOptions || me.resolveDataElementOptions(i, mode);
+        properties.options = sharedOptions || me.resolveDataElementOptions(i, arc.active ? 'active' : mode);
       }
       startAngle += circumference;
 

diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
@@ -71,7 +71,7 @@ export default class LineController extends DatasetController {
       properties.parsed = parsed;
 
       if (includeOptions) {
-        properties.options = sharedOptions || me.resolveDataElementOptions(i, mode);
+        properties.options = sharedOptions || me.resolveDataElementOptions(i, point.active ? 'active' : mode);
       }
 
       if (!directUpdate) {

diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js
@@ -91,7 +91,7 @@ export default class PolarAreaController extends DatasetController {
         outerRadius,
         startAngle,
         endAngle,
-        options: me.resolveDataElementOptions(i, mode)
+        options: me.resolveDataElementOptions(i, arc.active ? 'active' : mode)
       };
 
       me.updateElement(arc, i, properties, mode);

diff --git a/src/controllers/controller.radar.js b/src/controllers/controller.radar.js
@@ -53,7 +53,7 @@ export default class RadarController extends DatasetController {
 
     for (let i = start; i < start + count; i++) {
       const point = points[i];
-      const options = me.resolveDataElementOptions(i, mode);
+      const options = me.resolveDataElementOptions(i, point.active ? 'active' : mode);
       const pointPosition = scale.getPointPositionForValue(i, dataset.data[i]);
 
       const x = reset ? scale.xCenter : pointPosition.x;

diff --git a/test/fixtures/controller.doughnut/doughnut-set-active-elements.js b/test/fixtures/controller.doughnut/doughnut-set-active-elements.js
@@ -0,0 +1,27 @@
+module.exports = {
+  description: 'https://github.com/chartjs/Chart.js/issues/9248',
+  config: {
+    type: 'doughnut',
+    data: {
+      datasets: [
+        {
+          data: [34, 33, 17, 16],
+          backgroundColor: ['#D92323', '#E45757', '#ED8D8D', '#F5C4C4']
+        }
+      ]
+    },
+    options: {
+      events: [], // for easier saving of the fixture only
+      borderWidth: 0,
+      hoverBorderWidth: 4,
+      hoverBorderColor: 'black',
+      cutout: '80%',
+    }
+  },
+  options: {
+    run(chart) {
+      chart.setActiveElements([{datasetIndex: 0, index: 1}]);
+      chart.update();
+    }
+  }
+};
diff --git a/test/fixtures/controller.doughnut/doughnut-set-active-elements.png b/test/fixtures/controller.doughnut/doughnut-set-active-elements.png