Highcharts + Angular bubble chart: legend items for outline-only series don’t toggle points

Description: I’m using angular-highcharts to render a bubble chart where:

• Fill color encodes one dimension via multiple bubble series (one series per category A).
• Outline color encodes a second dimension via multiple scatter series that have data: [] (so they only appear as legend markers).

Clicking a bubble legend entry correctly hides/shows that entire series. Clicking an outline-only legend entry does nothing (no points to toggle) or throws errors when I try to hook into legendItemClick, because those series have no actual points.

What I’ve tried

initializeChart(): void {
if (!this.data?.length) return;

// 1) Build one bubble-series per category A
const groups = new Map<string, BubbleChartData[]>();
this.data.forEach(item => {
const key = `${item.categoryA}`;
(groups.get(key) ?? groups.set(key, []).get(key)!).push(item);
});
const series = Array.from(groups.entries()).map(([cat, items]) => ({
type: 'bubble' as const,
name: cat,
color: items[0].fillColor,
data: items.map(i => ({
x: +i.x,
y: +i.y,
z: +i.z,
groupB: i.groupB,
marker: { lineColor: i.outlineColor }
})),
showInLegend: true
}));

// 2) Add one empty-data scatter-series per category B
const outlineMap = new Map<string,string>();
series.forEach(s => (s.data as any[]).forEach(pt => {
outlineMap.set((pt as any).groupB, (pt as any).marker.lineColor);
}));
outlineMap.forEach((color, grp) => {
series.push({
type: 'scatter' as const,
name: grp,
data: [],
showInLegend: true,
marker: { symbol: 'circle', radius: 6, fillColor: 'transparent', lineColor: color }
});
});

// 3) Render
this.chart = new Chart({
chart: { type: 'bubble' },
legend: { enabled: true },
series: series as Highcharts.SeriesOptionsType[]
});
}

• Bubble legend clicks work out-of-the-box.
• Outline-only legend clicks do nothing.

I understand this is because those scatter series really have no points, so Highcharts has nothing to hide/show.

Question What is the “Highcharts-native” way to:

1. Keep the built-in legend (no fully custom HTML legend),
2. Display two groups of legend items (fill-color series vs. outline-only series),
3. Make outline-only legend entries toggle visibility of the matching bubble points (e.g. all points where point.groupB === clickedName), without resorting to completely reimplementing the legend in HTML?

Continue reading...