feat(bullet): per-item tooltips, range hover targets, show-labels mode

The combined axis tooltip is replaced with per-item hovers: the bar shows
the measure, markers show their own label and value, and each range
threshold gets an invisible hover target carrying its label (markArea is
not reliably hoverable). A Show labels control prints marker and range
labels directly on the chart and disables tooltips entirely.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: claude

superset-frontend/plugins/plugin-chart-echarts/src/Bullet/controlPanel.tsx

@@ -114,6 +114,20 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'show_labels',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show labels'),
+              renderTrigger: true,
+              default: false,
+              description: t(
+                'Print range and marker labels on the chart instead of showing tooltips on hover',
+              ),
+            },
+          },
+        ],
         ['y_axis_format'],
       ],
     },

superset-frontend/plugins/plugin-chart-echarts/src/Bullet/transformProps.ts

@@ -42,6 +42,7 @@ export default function transformProps(
     markerLines: rawMarkerLines,
     markerLineLabels: rawMarkerLineLabels,
     yAxisFormat,
+    showLabels,
   } = formData;
   const refs: Refs = {};
   const { onContextMenu, setDataMask = () => {} } = hooks;
@@ -140,26 +141,9 @@ export default function transformProps(
       axisTick: { show: false },
       axisLabel: { show: false },
     },
-    // Axis trigger so hovering anywhere on the chart shows the breakdown;
-    // precise hovers on the thin bar or bands are hard to hit.
     tooltip: {
       confine: true,
-      trigger: 'axis',
-      formatter: () =>
-        sanitizeHtml(
-          [
-            `${metricLabel}: <b>${formatter(measure)}</b>`,
-            ...rangeTooltipLines,
-            ...markers.map(
-              (value, i) =>
-                `${markerLabelAt(i, markerLabels, markers)}: <b>${formatter(value)}</b>`,
-            ),
-            ...markerLines.map(
-              (value, i) =>
-                `${markerLabelAt(i, markerLineLabels, markerLines)}: <b>${formatter(value)}</b>`,
-            ),
-          ].join('<br />'),
-        ),
+      show: !showLabels,
     },
     series: [
       {
@@ -168,6 +152,10 @@ export default function transformProps(
         data: [measure],
         barWidth: `${MEASURE_BAR_FRACTION * 100}%`,
         itemStyle: { color: theme.colorPrimary },
+        tooltip: {
+          formatter: () =>
+            sanitizeHtml(`${metricLabel}: <b>${formatter(measure)}</b>`),
+        },
         z: 10,
         markArea: {
           silent: true,
@@ -200,6 +188,32 @@ export default function transformProps(
           })),
         },
       },
+      {
+        // Invisible hover targets at each range threshold so ranges get their
+        // own item tooltip (markArea itself is not reliably hoverable), and a
+        // place to hang always-on labels.
+        name: 'ranges',
+        type: 'scatter',
+        data: ranges.map((value, index) => ({
+          value: [value, 0],
+          tooltip: {
+            formatter: () =>
+              sanitizeHtml(
+                `${rangeLabels[index] || ''} \u2264 <b>${formatter(value)}</b>`,
+              ),
+          },
+          label: {
+            show: Boolean(showLabels) && Boolean(rangeLabels[index]),
+            position: 'top',
+            color: theme.colorTextSecondary,
+            formatter: () => String(rangeLabels[index] || ''),
+          },
+        })),
+        symbol: 'rect',
+        symbolSize: [14, 40],
+        itemStyle: { color: 'transparent' },
+        z: 15,
+      },
       {
         name: 'markers',
         type: 'scatter',
@@ -216,6 +230,13 @@ export default function transformProps(
         })),
         symbol: 'triangle',
         symbolSize: 14,
+        label: {
+          show: Boolean(showLabels),
+          position: 'bottom',
+          color: theme.colorTextSecondary,
+          formatter: (params: { dataIndex: number }) =>
+            String(markerLabelAt(params.dataIndex, markerLabels, markers)),
+        },
         // Sit below the measure bar pointing up at the marked value
         symbolOffset: [0, markerOffsetPx],
         itemStyle: { color: theme.colorText },

superset-frontend/plugins/plugin-chart-echarts/src/Bullet/types.ts

@@ -35,6 +35,7 @@ export type EchartsBulletFormData = QueryFormData & {
   markerLines?: string;
   markerLineLabels?: string;
   yAxisFormat?: string;
+  showLabels?: boolean;
 };
 
 export interface EchartsBulletChartProps extends BaseChartProps<EchartsBulletFormData> {

superset-frontend/plugins/plugin-chart-echarts/test/Bullet/transformProps.test.ts

@@ -60,20 +60,20 @@ test('renders the measure bar with markers, marker lines and range bands', () =>
   expect(bandEnds).toEqual([300, 200, 100]);
 
   // triangle markers
-  expect(series[1].type).toBe('scatter');
-  expect(series[1].data[0].value).toEqual([150, 0]);
+  expect(series[2].type).toBe('scatter');
+  expect(series[2].data[0].value).toEqual([150, 0]);
 
   // axis spans all values
   expect((echartOptions as any).xAxis.max).toBe(300);
 
   // markers sit below the bar (pixel offset); no legend on this chart
-  expect(series[1].symbolOffset[1]).toBeGreaterThan(0);
+  expect(series[2].symbolOffset[1]).toBeGreaterThan(0);
   expect((echartOptions as any).legend.show).toBe(false);
 
-  // range labels surface in the measure tooltip
-  const tooltip = (echartOptions as any).tooltip.formatter();
-  expect(tooltip).toContain('low');
-  expect(tooltip).toContain('high');
+  // range thresholds get their own hover targets carrying the labels
+  const rangeTips = series[1].data.map((d: any) => d.tooltip.formatter());
+  expect(rangeTips.join(' ')).toContain('low');
+  expect(rangeTips.join(' ')).toContain('high');
 });
 
 test('defaults the band to 110% of the measure when no ranges are set', () => {
@@ -91,7 +91,7 @@ test('defaults the band to 110% of the measure when no ranges are set', () => {
   expect(series[0].data).toEqual([120]);
   const bandEnds = series[0].markArea.data.map((d: any) => d[1].xAxis);
   expect(bandEnds).toEqual([120 * 1.1]);
-  expect(series[1].data).toHaveLength(0);
+  expect(series[2].data).toHaveLength(0);
 });
 
 test('keeps distinct labels for duplicate marker and marker-line values', () => {
@@ -110,7 +110,7 @@ test('keeps distinct labels for duplicate marker and marker-line values', () =>
   );
   expect(markLineLabels).toEqual(['stretch', 'ceiling']);
 
-  const markerTooltips = series[1].data.map((d: any) => d.tooltip.formatter());
+  const markerTooltips = series[2].data.map((d: any) => d.tooltip.formatter());
   expect(markerTooltips[0]).toContain('goal');
   expect(markerTooltips[1]).toContain('forecast');
 });
@@ -122,10 +122,10 @@ test('sanitizes HTML in metric and marker labels before rendering tooltips', ()
       markerLabels: '<img src=x onerror=alert(1)>',
     }),
   );
-  const { series, tooltip } = echartOptions as any;
+  const { series } = echartOptions as any;
 
-  expect(tooltip.formatter()).not.toContain('onerror');
-  expect(series[1].data[0].tooltip.formatter()).not.toContain('onerror');
+  expect(series[0].tooltip.formatter()).not.toContain('onerror');
+  expect(series[2].data[0].tooltip.formatter()).not.toContain('onerror');
 });
 
 test('handles an empty query result without crashing', () => {