[FIX] charts: bubble legend hover colors

src/helpers/figures/charts/runtime/chart_highlight.ts

@@ -69,6 +69,32 @@ export function resetLineChartHighlights(dataSets: ChartDataset<"line" | "radar"
   }
 }
 
+export function highlightBubbleChartItem(item: LegendItem, dataSets: ChartDataset<"line">[]) {
+  const dataset = dataSets[0];
+  const backgroundColors = dataset.hoverBackgroundColor;
+  const borderColors = dataset.hoverBorderColor;
+  if (!Array.isArray(backgroundColors) || !Array.isArray(borderColors)) {
+    return;
+  }
+  dataset.backgroundColor = backgroundColors.map((color, i) =>
+    setColorAlpha(color, i === item.datasetIndex ? 1 : HIGHLIGHT_TRANSPARENCY)
+  );
+  dataset.borderColor = borderColors.map((color, i) =>
+    setColorAlpha(color, i === item.datasetIndex ? 1 : HIGHLIGHT_TRANSPARENCY)
+  );
+}
+
+export function resetBubbleChartHighlights(dataSets: ChartDataset<"line">[]) {
+  const dataset = dataSets[0];
+  const backgroundColors = dataset.hoverBackgroundColor;
+  const borderColors = dataset.hoverBorderColor;
+  if (!Array.isArray(backgroundColors) || !Array.isArray(borderColors)) {
+    return;
+  }
+  dataset.backgroundColor = [...backgroundColors];
+  dataset.borderColor = [...borderColors];
+}
+
 export function toggleLineBarDataVisibility(
   chart: Chart<"line" | "bar" | "radar">,
   item: LegendItem

src/helpers/figures/charts/runtime/chartjs_legend.ts

@@ -34,9 +34,11 @@ import { ColorGenerator } from "../../../color";
 import { BubbleChartData } from "../bubble_chart";
 import { chartFontColor, getPieColors, isTrendLineAxis, truncateLabel } from "../chart_common";
 import {
+  highlightBubbleChartItem,
   highlightComboChartItem,
   highlightLineChartItem,
   highlightPieChartItem,
+  resetBubbleChartHighlights,
   resetComboChartHighlights,
   resetLineChartHighlights,
   resetPieChartHighlights,
@@ -372,8 +374,8 @@ function getInteractiveLegendConfig({
 
 const INTERACTIVE_LEGEND_CONFIG_FOR_BUBBLE_CHART = {
   ...getInteractiveLegendConfig({
-    highlightItem: highlightLineChartItem,
-    unHighlightItems: resetLineChartHighlights,
+    highlightItem: highlightBubbleChartItem,
+    unHighlightItems: resetBubbleChartHighlights,
     toggleDataVisibility: toggleLineBarDataVisibility,
   }),
   onClick: (event, legendItem, legend) => {

tests/figures/chart/bubble/bubble_chart_plugin.test.ts

@@ -7,6 +7,7 @@ import { BubbleChartRuntime } from "../../../../src/types/chart/bubble_chart";
 import { createBubbleChart, updateChart } from "../../../test_helpers";
 import {
   GENERAL_CHART_CREATION_CONTEXT,
+  getChartConfiguration,
   getChartLegendLabels,
   getChartTooltipItemFromDataset,
   getChartTooltipValues,
@@ -117,6 +118,35 @@ describe("bubble chart", () => {
     expect(getChartLegendLabels(model, "1")).not.toBeDefined();
   });
 
+  test("Bubble chart legend hover highlights one bubble", () => {
+    //prettier-ignore
+    const model = createModelFromGrid({
+      A1: "A", B1: "1", C1: "2",
+      A2: "B", B2: "2", C2: "3",
+    });
+    createBubbleChart(
+      model,
+      {
+        yRanges: ["C1:C2"],
+        xRange: "B1:B2",
+        labelRange: "A1:A2",
+        bubbleColor: { color: "multiple" },
+      },
+      "1"
+    );
+    const config = getChartConfiguration(model, "1");
+    const dataset = config.data.datasets[0];
+    const legend = { chart: { ...config, update: jest.fn() } };
+
+    config.options.plugins.legend.onHover({}, { datasetIndex: 1 }, legend);
+    expect(dataset.backgroundColor).toEqual(["#4EA7F233", "#EA6175"]);
+    expect(dataset.borderColor).toEqual(["#4EA7F233", "#EA6175"]);
+
+    config.options.plugins.legend.onLeave({}, { datasetIndex: 1 }, legend);
+    expect(dataset.backgroundColor).toEqual(["#4EA7F2", "#EA6175"]);
+    expect(dataset.borderColor).toEqual(["#4EA7F2", "#EA6175"]);
+  });
+
   test("bubble chart runtime uses dedicated ranges and color modes", () => {
     // prettier-ignore
     const model = createModelFromGrid({