fix(charts): reserve the authored bar gap between grouped bars

Grouped horizontal bar rows now size their gap from the series `barGap` the way
ECharts does (pixels, a percentage of bar width, default 20%, overlap for
negative gaps) instead of a fixed 4px.

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/option.test.ts

@@ -46,6 +46,23 @@ describe('horizontal bar label layout', () => {
     expect(authored.yAxis[0]).not.toHaveProperty('axisLabel')
   })
 
+  it('reserves the authored gap between grouped bars in each row', () => {
+    const grouped = (barGap?: string | number) => ({
+      xAxis: { type: 'value' },
+      yAxis: { type: 'category' },
+      series: [
+        { type: 'bar', barWidth: 20, ...(barGap === undefined ? {} : { barGap }) },
+        { type: 'bar', barWidth: 20 },
+      ],
+    })
+    const rows = 10
+    const base = horizontalBarChartHeight(grouped('0%'), rows) ?? 0
+    expect(horizontalBarChartHeight(grouped(), rows)).toBe(base + rows * 4)
+    expect(horizontalBarChartHeight(grouped('150%'), rows)).toBe(base + rows * 30)
+    expect(horizontalBarChartHeight(grouped(40), rows)).toBe(base + rows * 40)
+    expect(horizontalBarChartHeight(grouped('-100%'), rows)).toBe(base - rows * 20)
+  })
+
   it('keeps every authored tooltip entry when turning off the shadow pointer', () => {
     const result = buildChartRenderOption({
       option: {

apps/sim/lib/charts/option.ts

@@ -46,7 +46,29 @@ export function mapTooltipEntries(
 
 const CATEGORY_LABEL_LAYOUT_KEYS = ['inside', 'width', 'margin'] as const
 
-const BAR_GROUP_GAP = 4
+/** ECharts' default `barGap`: the space between grouped bars, relative to bar width. */
+const DEFAULT_BAR_GAP = '20%'
+
+/**
+ * Pixel gap between side-by-side bars. ECharts reads `barGap` from the last series that sets
+ * it: a number is pixels, a percentage is relative to the bar width, and a negative gap
+ * overlaps the bars, which then need no extra space.
+ */
+function barGapPixels(option: Record<string, unknown>, barWidth: number): number {
+  const series = Array.isArray(option.series) ? option.series : [option.series]
+  let gap: unknown = DEFAULT_BAR_GAP
+  for (const entry of series) {
+    const barGap = toRecord(entry).barGap
+    if (barGap !== undefined) gap = barGap
+  }
+  const pixels =
+    typeof gap === 'number'
+      ? gap
+      : typeof gap === 'string' && gap.endsWith('%')
+        ? (barWidth * Number.parseFloat(gap)) / 100
+        : Number(gap)
+  return Number.isFinite(pixels) ? pixels : 0
+}
 
 /**
  * Bar thickness per slot in one category row: stacked series share a slot, every other series
@@ -212,8 +234,11 @@ export function horizontalBarChartHeight(
 ): 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 gap = barGapPixels(option, Math.max(...slots))
+  const barsHeight = Math.max(
+    Math.max(...slots),
+    slots.reduce((total, width) => total + width, 0) + gap * (slots.length - 1)
+  )
   const rowHeight =
     barsHeight + (authorsCategoryLabelColumn(option) ? LEFT_LABEL_ROW_GAP : ABOVE_BAR_LABEL_SPACE)
   return Math.max(MIN_CHART_HEIGHT, HORIZONTAL_BAR_CHROME_HEIGHT + rowCount * rowHeight)