fix(charts): size grouped bar rows and keep the row highlight through resizes

Unstacked bar series sit side by side in a category row, so grouped charts keep
the ECharts label column and their rows fit every bar slot. The row highlight
redraws the active row after each render, so a resize moves it with the plot.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01S6aTRnkiu7PxYZPNPXYEMV

Author: TheodoreSpeaks

apps/sim/lib/charts/bar-row-highlight.test.ts

@@ -43,6 +43,18 @@ it('highlights the hovered row around its label and bar without touching neighbo
     expect(area.y + area.height).toBeGreaterThanOrEqual(barCenter(hovered) + 8)
     expect(area.y).toBeGreaterThanOrEqual(barCenter(hovered - 1) + 8)
     expect(area.y + area.height).toBeLessThanOrEqual(labelTop(categories[hovered + 1]))
+
+    chart.resize({ width: 720, height: height * 2 })
+    chart.getZr().flush()
+    chart.getZr().flush()
+    const resized = chart
+      .getZr()
+      .storage.getDisplayList(true)
+      .find((node) => node.type === 'rect' && !node.invisible && node.style.opacity === 0.06)
+    if (!resized) throw new Error('Missing row highlight after resize')
+    const moved = resized.getBoundingRect()
+    expect(moved.y + moved.height).toBeGreaterThanOrEqual(barCenter(hovered) + 8)
+    expect(moved.y).toBeGreaterThanOrEqual(barCenter(hovered - 1) + 8)
     dispose()
   } finally {
     chart.dispose()

apps/sim/lib/charts/bar-row-highlight.ts

@@ -30,17 +30,28 @@ export function installBarRowHighlight(
   }
   const color = getComputedStyle(chart.getDom()).getPropertyValue('--text-body').trim()
   let current: number | null = null
+  /** Geometry last drawn; a resize changes it for the same row, so rows alone cannot dedupe. */
+  let drawn = ''
 
   const render = (row: number | null) => {
-    if (row === current) return
     current = row
     if (row === null) {
+      if (drawn === 'hidden') return
+      drawn = 'hidden'
       chart.setOption({ graphic: [{ id: HIGHLIGHT_ID, type: 'rect', invisible: true }] })
       return
     }
     const center = chart.convertToPixel({ yAxisIndex: 0 }, row)
     const left = inset(grid.left)
-    const bottom = center + barWidth / 2 + BELOW_BAR_MARGIN
+    const shape = {
+      x: left,
+      y: center + barWidth / 2 + BELOW_BAR_MARGIN - rowHeight,
+      width: chart.getWidth() - left - inset(grid.right),
+      height: rowHeight,
+    }
+    const geometry = JSON.stringify(shape)
+    if (geometry === drawn) return
+    drawn = geometry
     chart.setOption({
       graphic: [
         {
@@ -49,12 +60,7 @@ export function installBarRowHighlight(
           invisible: false,
           silent: true,
           z: 0,
-          shape: {
-            x: left,
-            y: bottom - rowHeight,
-            width: chart.getWidth() - left - inset(grid.right),
-            height: rowHeight,
-          },
+          shape,
           style: { fill: color, opacity: 0.06 },
         },
       ],
@@ -68,10 +74,16 @@ export function installBarRowHighlight(
     render(typeof category?.value === 'number' ? category.value : null)
   }
   const onLeave = () => render(null)
+  /** Resizes re-render the chart; redraw the active row so it follows the new layout. */
+  const onRendered = () => {
+    if (current !== null) render(current)
+  }
   chart.on('updateAxisPointer', onPointer)
   chart.on('globalout', onLeave)
+  chart.on('finished', onRendered)
   return () => {
     chart.off('updateAxisPointer', onPointer)
     chart.off('globalout', onLeave)
+    chart.off('finished', onRendered)
   }
 }

apps/sim/lib/charts/option.test.ts

@@ -45,6 +45,31 @@ describe('horizontal bar label layout', () => {
     expect(authored.yAxis[0]).not.toHaveProperty('axisLabel')
   })
 
+  it('keeps the label column for grouped bars and sizes rows for every bar in the group', () => {
+    const grouped = {
+      xAxis: { type: 'value' },
+      yAxis: { type: 'category' },
+      series: [{ type: 'bar' }, { type: 'bar' }],
+    }
+    expect(buildChartRenderOption({ option: grouped }).yAxis).not.toHaveProperty('axisLabel')
+    const single = { ...grouped, series: [{ type: 'bar' }] }
+    const rows = 20
+    expect(horizontalBarChartHeight(grouped, rows)).toBeGreaterThanOrEqual(
+      (horizontalBarChartHeight({ ...single, grid: { left: 0 } }, rows) ?? 0) +
+        rows * CHART_BAR_MAX_WIDTH
+    )
+    const stacked = {
+      ...grouped,
+      series: [
+        { type: 'bar', stack: 'total' },
+        { type: 'bar', stack: 'total' },
+      ],
+    }
+    expect(buildChartRenderOption({ option: stacked }).yAxis).toMatchObject({
+      axisLabel: { inside: true },
+    })
+  })
+
   it('keeps the ECharts label column for percentage bar widths it cannot size per row', () => {
     const option = {
       xAxis: { type: 'value' },

apps/sim/lib/charts/option.ts

@@ -36,17 +36,40 @@ export function isHorizontalBarOption(option: Record<string, unknown>): boolean
 
 const CATEGORY_LABEL_LAYOUT_KEYS = ['inside', 'width', 'margin'] as const
 
+const BAR_GROUP_GAP = 4
+
+/**
+ * Bar thickness per slot in one category row: stacked series share a slot, every other series
+ * gets its own, and slots sit side by side within the row.
+ */
+function barSlotWidths(option: Record<string, unknown>): number[] {
+  const series = Array.isArray(option.series) ? option.series : [option.series]
+  const slots = new Map<unknown, number>()
+  series.forEach((entry, index) => {
+    const bar = toRecord(entry)
+    const width = bar.barWidth ?? bar.barMaxWidth
+    const key = bar.stack ?? Symbol(index)
+    slots.set(
+      key,
+      Math.max(slots.get(key) ?? 0, typeof width === 'number' ? width : CHART_BAR_MAX_WIDTH)
+    )
+  })
+  return [...slots.values()]
+}
+
 /**
  * Labels above the bars are a default layout, not a blend: an option that places its own
  * category labels or reserves a left inset keeps the standard ECharts left column intact. So
- * does a percentage bar width, which scales with the plot and cannot be sized per row.
+ * does a percentage bar width, which scales with the plot and cannot be sized per row, and a
+ * grouped chart, whose side-by-side bars leave no single bar to place a label above.
  */
 function authorsCategoryLabelColumn(option: Record<string, unknown>): boolean {
   const axis = toRecord(Array.isArray(option.yAxis) ? option.yAxis[0] : option.yAxis)
   const axisLabel = toRecord(axis.axisLabel)
   const grids = Array.isArray(option.grid) ? option.grid : [option.grid]
   const series = Array.isArray(option.series) ? option.series : [option.series]
   return (
+    barSlotWidths(option).length > 1 ||
     CATEGORY_LABEL_LAYOUT_KEYS.some((key) => axisLabel[key] !== undefined) ||
     series.some((entry) => {
       const bar = toRecord(entry)
@@ -176,9 +199,11 @@ export function horizontalBarChartHeight(
   rowCount: number
 ): number | null {
   if (!isHorizontalBarOption(option)) return null
+  const slots = barSlotWidths(option)
+  const barsHeight =
+    slots.reduce((total, width) => total + width, 0) + BAR_GROUP_GAP * (slots.length - 1)
   const rowHeight =
-    horizontalBarWidth(option) +
-    (authorsCategoryLabelColumn(option) ? LEFT_LABEL_ROW_GAP : ABOVE_BAR_LABEL_SPACE)
+    barsHeight + (authorsCategoryLabelColumn(option) ? LEFT_LABEL_ROW_GAP : ABOVE_BAR_LABEL_SPACE)
   return Math.max(MIN_CHART_HEIGHT, HORIZONTAL_BAR_CHROME_HEIGHT + rowCount * rowHeight)
 }