termcast 1.5.0 → 1.7.0

package/src/components/bar-graph.tsx

@@ -4,7 +4,7 @@
  * Pure React/opentui implementation using <box> elements with justifyContent
  * "space-evenly" for bar distribution. Each bar is a column of stacked colored
  * segments sized via flexGrow. Segments render with a thin lower-block glyph
- * instead of painted backgrounds, which keeps the chart airy like Histogram.
+ * using full-block glyphs for solid, gap-free columns.
  * Y-axis labels render on the left. X-axis labels sit below each bar, truncated with
  * overflow="hidden" when the bar is narrower than the label text.
  *
@@ -14,10 +14,12 @@
  * Color palette comes from getThemePalette() and cycles with %.
  */
 
-import React, { ReactNode, useMemo } from 'react'
+import React, { ReactNode, useMemo, useRef } from 'react'
 import { BoxProps } from '@opentui/react'
+import type { MouseEvent as OpenTUIMouseEvent } from '@opentui/core'
 import { useTheme, getThemePalette } from 'termcast/src/theme'
 import { Color, resolveColor } from 'termcast/src/colors'
+import { ChartTooltip, useChartTooltip, interpolateXLabel, formatTooltipLine } from 'termcast/src/components/chart-tooltip'
 
 // ── Types ────────────────────────────────────────────────────────────
 
@@ -35,11 +37,11 @@ export interface BarGraphProps extends BoxProps {
   height?: number
   /** X-axis labels, one per bar position */
   labels?: string[]
-  /** Width of each bar in terminal columns (default: 3) */
+  /** Width of each bar in terminal columns (default: 2) */
   barWidth?: number
-  /** Gap between bars in terminal columns (default: 1) */
+  /** Gap between bars in terminal columns (default: 2) */
   barGap?: number
-  /** Character used for bar cells (default: "▃") */
+  /** Character used for bar cells (default: "█") */
   barCharacter?: string
   /** Show Y-axis labels and separator (default: true) */
   showYAxis?: boolean
@@ -73,9 +75,9 @@ const BarGraph: {
   const {
     height = 15,
     labels = [],
-    barWidth = 3,
-    barGap = 1,
-    barCharacter = '▃',
+    barWidth = 2,
+    barGap = 2,
+    barCharacter = '█',
     showYAxis = true,
     yTicks = 5,
     yFormat,
@@ -86,6 +88,8 @@ const BarGraph: {
   } = props
 
   const palette = getThemePalette(theme)
+  const containerRef = useRef<any>(null)
+  const { tooltip, show: showTooltip, hide: hideTooltip } = useChartTooltip()
 
   // Collect series from children
   const seriesList = useMemo<Array<{ data: number[]; color: string; title?: string }>>(() => {
@@ -187,11 +191,12 @@ const BarGraph: {
   }
 
   return (
-    <box flexDirection={legendOnRight ? 'row' : 'column'} {...rest}>
+    <box ref={containerRef} flexDirection={legendOnRight ? 'row' : 'column'} {...rest} onMouseOut={hideTooltip}>
+      <ChartTooltip tooltip={tooltip} containerRef={containerRef} />
       <box flexDirection="column" flexGrow={1} flexShrink={1} overflow="hidden">
         <box flexDirection="row" height={height} width="100%" alignItems="flex-start" overflow="hidden">
           {showYAxis ? (
-            <box flexDirection="column" width={yAxisWidth + 1} height={height} flexShrink={0} overflow="hidden">
+            <box flexDirection="column" width={yAxisWidth + 1} height={height} flexShrink={0} overflow="hidden" onMouseMove={hideTooltip}>
               {Array.from({ length: plotHeight }, (_, row) => {
                 const label = yAxisLabelByRow.get(row) || ''
                 return (
@@ -217,13 +222,27 @@ const BarGraph: {
 
                 return (
                   <React.Fragment key={barIdx}>
-                    {barIdx > 0 && safeBarGap > 0 ? <box width={safeBarGap} flexShrink={0} /> : null}
+                    {barIdx > 0 && safeBarGap > 0 ? <box width={safeBarGap} flexShrink={0} onMouseMove={hideTooltip} /> : null}
                     <box
                       flexDirection="column"
                       height="100%"
                       flexGrow={0}
                       flexShrink={0}
                       width={safeBarWidth}
+                      onMouseMove={(evt: OpenTUIMouseEvent) => {
+                        const lines: string[] = []
+                        const label = interpolateXLabel({ dataIndex: barIdx, dataLength: numBars, xLabels: labels })
+                        for (const series of seriesList) {
+                          const value = series.data[barIdx] || 0
+                          if (value <= 0) continue
+                          const name = series.title || label
+                          lines.push(formatTooltipLine(name, value))
+                        }
+                        if (lines.length === 0) return
+                        // Always show x-axis label as the header line
+                        lines.unshift(label)
+                        showTooltip({ x: evt.x, y: evt.y, lines })
+                      }}
                     >
                       {/* Plot area: spacer on top pushes colored segments to the bottom
                           so all bars are bottom-aligned regardless of total value. */}
@@ -232,8 +251,8 @@ const BarGraph: {
                           <box flexGrow={emptyGrow} />
                         )}
                         {/* Segments: last series at top, first at bottom. The repeated
-                            lower-block glyph wraps inside the fixed-width segment, so it
-                            stays visible in snapshots without filling the whole cell. */}
+                            full-block glyph wraps inside the fixed-width segment, filling
+                            the entire cell for solid, gap-free bars. */}
                         {[...seriesList].reverse().map((series, reverseIdx) => {
                           const value = series.data[barIdx] || 0
                           if (value <= 0) {

package/src/components/candle-chart.tsx

@@ -15,13 +15,14 @@
  * Layout reuses the same Y-axis + X-axis label pattern as Graph component.
  */
 
-import { useMemo } from 'react'
+import { useMemo, useRef } from 'react'
 import { Renderable, RGBA } from '@opentui/core'
-import type { RenderableOptions, RenderContext } from '@opentui/core'
+import type { RenderableOptions, RenderContext, MouseEvent as OpenTUIMouseEvent } from '@opentui/core'
 import type { OptimizedBuffer } from '@opentui/core'
 import { extend } from '@opentui/react'
 import { useTheme } from 'termcast/src/theme'
 import { Color, resolveColor } from 'termcast/src/colors'
+import { ChartTooltip, useChartTooltip, interpolateXLabel, formatTooltipLine } from 'termcast/src/components/chart-tooltip'
 
 // ── Data types ───────────────────────────────────────────────────────
 
@@ -97,6 +98,15 @@ export class CandleChartRenderable extends Renderable {
   set downColor(value: string) { this._downColor = value; this.requestRender() }
   set wickColor(value: string) { this._wickColor = value; this.requestRender() }
 
+  /** Public accessor for tooltip coordinate mapping */
+  getPlotLayout() { return this.computeLayout() }
+
+  /** Current candle data for tooltip value lookup */
+  getCandles() { return this._candles }
+
+  /** Get aggregated columns for the current plot width */
+  getAggregatedColumns({ plotW }: { plotW: number }) { return this.aggregateToColumns({ plotW }) }
+
   // ── Layout: compute plot area and Y labels ─────────────────────
   private computeLayout(): {
     plotX: number; plotY: number; plotW: number; plotH: number
@@ -367,6 +377,9 @@ const CandleChart: CandleChartType = (props) => {
 
   const resolvedUpColor = resolveColor(upColor) || Color.Green
   const resolvedDownColor = resolveColor(downColor) || Color.Red
+  const containerRef = useRef<any>(null)
+  const plotRef = useRef<CandleChartRenderable>(null)
+  const { tooltip, show: showTooltip, hide: hideTooltip } = useChartTooltip()
 
   // Auto-compute Y range from data high/low if not provided
   const computedYRange = useMemo<[number, number]>(() => {
@@ -389,21 +402,55 @@ const CandleChart: CandleChartType = (props) => {
   // Total height = plot rows + 1 for x-axis labels
   const totalHeight = height + (xLabels.length > 0 ? 1 : 0)
 
+  const handleMouseMove = (evt: OpenTUIMouseEvent) => {
+    const plot = plotRef.current
+    if (!plot) return
+    const layout = plot.getPlotLayout()
+    if (!layout) return
+
+    const columns = plot.getAggregatedColumns({ plotW: layout.plotW })
+    if (columns.length === 0) return
+
+    // CandleChart right-aligns candles: offset = plotW - columns.length
+    const offset = layout.plotW - columns.length
+    const col = evt.x - layout.plotX - offset
+    if (col < 0 || col >= columns.length) {
+      hideTooltip()
+      return
+    }
+
+    const candle = columns[col]!
+    const label = interpolateXLabel({ dataIndex: col, dataLength: columns.length, xLabels })
+    const lines = [
+      label,
+      formatTooltipLine('O', candle.open.toFixed(2)),
+      formatTooltipLine('H', candle.high.toFixed(2)),
+      formatTooltipLine('L', candle.low.toFixed(2)),
+      formatTooltipLine('C', candle.close.toFixed(2)),
+    ]
+    showTooltip({ x: evt.x, y: evt.y, lines })
+  }
+
   return (
-    <candle-chart-plot
-      width="100%"
-      height={totalHeight}
-      candles={data}
-      xLabels={xLabels}
-      yMin={computedYRange[0]}
-      yMax={computedYRange[1]}
-      yTicks={yTicks}
-      yFormat={yFormat}
-      axisColor={theme.textMuted}
-      upColor={resolvedUpColor}
-      downColor={resolvedDownColor}
-      wickColor={theme.textMuted}
-    />
+    <box ref={containerRef} width="100%" onMouseOut={hideTooltip}>
+      <ChartTooltip tooltip={tooltip} containerRef={containerRef} />
+      <candle-chart-plot
+        ref={plotRef}
+        width="100%"
+        height={totalHeight}
+        candles={data}
+        xLabels={xLabels}
+        yMin={computedYRange[0]}
+        yMax={computedYRange[1]}
+        yTicks={yTicks}
+        yFormat={yFormat}
+        axisColor={theme.textMuted}
+        upColor={resolvedUpColor}
+        downColor={resolvedDownColor}
+        wickColor={theme.textMuted}
+        onMouseMove={handleMouseMove}
+      />
+    </box>
   )
 }
 

package/src/components/chart-tooltip.tsx

@@ -0,0 +1,191 @@
+/**
+ * Shared tooltip component for all chart/graph components.
+ *
+ * Renders an absolute-positioned box near the cursor showing the x-axis label
+ * and y-axis value for the hovered data point. Used by BarGraph, Graph,
+ * DottedLineGraph, HorizontalBarGraph, BarChart, and CandleChart.
+ *
+ * Each chart wraps its plot area with a container that handles mouse events
+ * and converts cursor coordinates to tooltip content via `useChartTooltip()`.
+ */
+
+import React, { useState, useRef } from 'react'
+import type { MouseEvent as OpenTUIMouseEvent } from '@opentui/core'
+import { useTheme } from 'termcast/src/theme'
+
+// ── Tooltip state ────────────────────────────────────────────────────
+
+export interface TooltipData {
+  /** Absolute terminal X where the tooltip should appear */
+  x: number
+  /** Absolute terminal Y where the tooltip should appear */
+  y: number
+  /** Lines of text to show in the tooltip */
+  lines: string[]
+}
+
+export interface ChartTooltipState {
+  tooltip: TooltipData | null
+  show: (data: TooltipData) => void
+  hide: () => void
+}
+
+/**
+ * Hook to manage tooltip state. Each chart component calls this once
+ * and passes `show`/`hide` to mouse event handlers.
+ */
+export function useChartTooltip(): ChartTooltipState {
+  const [tooltip, setTooltip] = useState<TooltipData | null>(null)
+  const showRef = useRef((data: TooltipData) => {
+    setTooltip(data)
+  })
+  const hideRef = useRef(() => {
+    setTooltip(null)
+  })
+  return { tooltip, show: showRef.current, hide: hideRef.current }
+}
+
+// ── Tooltip component ────────────────────────────────────────────────
+
+interface ChartTooltipProps {
+  tooltip: TooltipData | null
+  /** The ref of the chart container box, used to compute relative position */
+  containerRef: React.RefObject<{ x: number; y: number; width: number; height: number } | null>
+}
+
+/**
+ * Absolute-positioned tooltip that floats near the hovered data point.
+ * Must be rendered inside the chart's outermost `<box>` container.
+ *
+ * Position is computed relative to the container. The tooltip shifts
+ * left when it would overflow the right edge, and shifts above the
+ * cursor when it would overflow the bottom.
+ */
+export function ChartTooltip({ tooltip, containerRef }: ChartTooltipProps): any {
+  const theme = useTheme()
+
+  if (!tooltip || !containerRef.current) {
+    return null
+  }
+
+  const container = containerRef.current
+  const maxWidth = Math.max(...tooltip.lines.map((line) => line.length)) + 2
+  const tooltipHeight = tooltip.lines.length
+
+  // Convert absolute terminal coordinates to relative container coordinates
+  let relX = tooltip.x - container.x + 2
+  let relY = tooltip.y - container.y - tooltipHeight
+
+  // Shift left if tooltip would overflow the right edge
+  if (relX + maxWidth > container.width) {
+    relX = Math.max(0, container.width - maxWidth)
+  }
+
+  // Shift below cursor if tooltip would overflow the top
+  if (relY < 0) {
+    relY = tooltip.y - container.y + 1
+  }
+
+  return (
+    <box
+      position="absolute"
+      left={relX}
+      top={relY}
+      height={tooltipHeight}
+      overflow="hidden"
+      flexShrink={0}
+      backgroundColor={theme.backgroundPanel}
+    >
+      {tooltip.lines.map((line, i) => {
+        return (
+          <text key={i} fg={theme.text} wrapMode="none"> {line} </text>
+        )
+      })}
+    </box>
+  )
+}
+
+// ── Helpers for renderable-based charts ──────────────────────────────
+
+/**
+ * For renderable-based charts (Graph, DottedLineGraph, CandleChart), compute
+ * which data index the cursor is hovering over based on the mouse X coordinate
+ * relative to the plot area.
+ */
+export function computeDataIndexFromMouseX({
+  mouseX,
+  plotX,
+  plotW,
+  dataLength,
+}: {
+  mouseX: number
+  plotX: number
+  plotW: number
+  dataLength: number
+}): number {
+  if (dataLength <= 0 || plotW <= 0) return -1
+  const relX = mouseX - plotX
+  if (relX < 0 || relX >= plotW) return -1
+  return Math.round((relX / Math.max(1, plotW - 1)) * (dataLength - 1))
+}
+
+/**
+ * Resolve the x-axis label for a given data index.
+ *
+ * When xLabels has at least as many entries as data points (1:1 mapping,
+ * typical for BarGraph where each bar has its own label), the label is
+ * looked up directly by index.
+ *
+ * When xLabels is shorter (typical for line charts where a few tick labels
+ * are spread across many data points), the label is interpolated by mapping
+ * the normalized data position to the nearest label.
+ *
+ * Falls back to the stringified index only if no labels are provided at all.
+ */
+export function interpolateXLabel({
+  dataIndex,
+  dataLength,
+  xLabels,
+}: {
+  dataIndex: number
+  dataLength: number
+  xLabels: string[]
+}): string {
+  if (xLabels.length === 0) return `${dataIndex}`
+
+  // 1:1 mapping: xLabels covers every data point
+  const hasDirectLabels = xLabels.length >= dataLength
+  if (hasDirectLabels) {
+    const direct = xLabels[dataIndex]
+    if (direct !== undefined && direct !== '') return direct
+    return `${dataIndex}`
+  }
+
+  // Sparse labels: interpolate by normalized position
+  if (dataLength <= 1) return xLabels[0] || `${dataIndex}`
+  const t = dataIndex / (dataLength - 1)
+  const labelIdx = Math.round(t * (xLabels.length - 1))
+  const resolved = xLabels[labelIdx]
+  if (resolved !== undefined && resolved !== '') return resolved
+
+  // Scan for nearest non-empty label
+  let bestIdx = -1
+  let bestDist = Infinity
+  for (let i = 0; i < xLabels.length; i++) {
+    if (xLabels[i] === undefined || xLabels[i] === '') continue
+    const dist = Math.abs(i - labelIdx)
+    if (dist < bestDist) {
+      bestDist = dist
+      bestIdx = i
+    }
+  }
+  if (bestIdx >= 0) return xLabels[bestIdx]!
+  return `${dataIndex}`
+}
+
+/**
+ * Format a single tooltip line from a label and numeric value.
+ */
+export function formatTooltipLine(label: string, value: number | string): string {
+  return `${label}: ${value}`
+}

package/src/components/dotted-line-graph.tsx

@@ -5,12 +5,13 @@
  * can move by half columns and quarter rows instead of snapping to full cells.
  */
 
-import React, { ReactNode, useMemo } from 'react'
+import React, { ReactNode, useMemo, useRef } from 'react'
 import { Renderable, RGBA } from '@opentui/core'
-import type { OptimizedBuffer, RenderableOptions, RenderContext } from '@opentui/core'
+import type { OptimizedBuffer, RenderableOptions, RenderContext, MouseEvent as OpenTUIMouseEvent } from '@opentui/core'
 import { extend } from '@opentui/react'
 import { Color, resolveColor } from 'termcast/src/colors'
 import { getThemePalette, useTheme } from 'termcast/src/theme'
+import { ChartTooltip, useChartTooltip, computeDataIndexFromMouseX, interpolateXLabel, formatTooltipLine } from 'termcast/src/components/chart-tooltip'
 
 const BRAILLE_BITS: number[][] = [
   [1, 8],
@@ -73,6 +74,12 @@ class DottedLineGraphPlotRenderable extends Renderable {
   set axisColor(value: string) { this._axisColor = value; this.requestRender() }
   set dotSpacing(value: number) { this._dotSpacing = value; this.requestRender() }
 
+  /** Public accessor for tooltip coordinate mapping */
+  getPlotLayout() { return this.computeLayout() }
+
+  /** Current series data for tooltip value lookup */
+  getSeries() { return this._series }
+
   private computeLayout(): {
     plotX: number
     plotY: number
@@ -314,6 +321,9 @@ const DottedLineGraph: DottedLineGraphType = (props) => {
     children,
   } = props
   const palette = getThemePalette(theme)
+  const containerRef = useRef<any>(null)
+  const plotRef = useRef<DottedLineGraphPlotRenderable>(null)
+  const { tooltip, show: showTooltip, hide: hideTooltip } = useChartTooltip()
 
   const series = useMemo<Array<DottedLineGraphSeriesData & { title?: string }>>(() => {
     return React.Children.toArray(children)
@@ -364,11 +374,46 @@ const DottedLineGraph: DottedLineGraphType = (props) => {
     })) + 1
   }, [computedYRange, yFormat, yTicks])
 
+  const handleMouseMove = (evt: OpenTUIMouseEvent) => {
+    const plot = plotRef.current
+    if (!plot) return
+    const layout = plot.getPlotLayout()
+    if (!layout) return
+
+    const allSeries = plot.getSeries()
+    const maxDataLen = Math.max(0, ...allSeries.map((s) => s.data.length))
+    const idx = computeDataIndexFromMouseX({
+      mouseX: evt.x,
+      plotX: layout.plotX,
+      plotW: layout.plotW,
+      dataLength: maxDataLen,
+    })
+    if (idx < 0) {
+      hideTooltip()
+      return
+    }
+
+    const label = interpolateXLabel({ dataIndex: idx, dataLength: maxDataLen, xLabels })
+    const lines = series
+      .filter((s) => idx < s.data.length)
+      .map((s) => {
+        const value = s.data[idx] ?? 0
+        const prefix = s.title ? `${s.title}` : label
+        return formatTooltipLine(prefix, Number(value.toFixed(2)))
+      })
+    if (lines.length === 0) return
+    // Always show x-axis label as the header line
+    lines.unshift(label)
+    showTooltip({ x: evt.x, y: evt.y, lines })
+  }
+
   if (series.length === 0) return null
 
   return (
-    <box flexDirection="column" width="100%" flexShrink={0}>
+    <box ref={containerRef} flexDirection="column" width="100%" flexShrink={0} onMouseOut={hideTooltip}>
+      <ChartTooltip tooltip={tooltip} containerRef={containerRef} />
       <dotted-line-graph-plot
+        ref={plotRef}
         width="100%"
         height={height + (xLabels.length > 0 ? 1 : 0)}
         series={plotSeries}
@@ -379,6 +424,7 @@ const DottedLineGraph: DottedLineGraphType = (props) => {
         yFormat={yFormat}
         axisColor={theme.textMuted}
         dotSpacing={dotSpacing}
+        onMouseMove={handleMouseMove}
       />
       {legendVisible ? (
         <box height={1} width="100%" flexShrink={0} overflow="hidden" flexDirection="row">

package/src/components/graph.tsx

@@ -20,13 +20,14 @@
  * For a plot of W cols x H rows we get W*2 x H*4 virtual pixels.
  */
 
-import React, { ReactNode, useMemo } from 'react'
+import React, { ReactNode, useMemo, useRef } from 'react'
 import { Renderable, RGBA } from '@opentui/core'
-import type { RenderableOptions, RenderContext } from '@opentui/core'
+import type { RenderableOptions, RenderContext, MouseEvent as OpenTUIMouseEvent } from '@opentui/core'
 import type { OptimizedBuffer } from '@opentui/core'
 import { extend } from '@opentui/react'
 import { useTheme, getThemePalette } from 'termcast/src/theme'
 import { Color, resolveColor } from 'termcast/src/colors'
+import { ChartTooltip, useChartTooltip, computeDataIndexFromMouseX, interpolateXLabel, formatTooltipLine } from 'termcast/src/components/chart-tooltip'
 
 // ── Graph variant ────────────────────────────────────────────────────
 // Three rendering modes for the plot area:
@@ -124,6 +125,12 @@ export class GraphPlotRenderable extends Renderable {
   set stripeColor1(value: string) { this._stripeColor1 = value; this.requestRender() }
   set stripeColor2(value: string) { this._stripeColor2 = value; this.requestRender() }
 
+  /** Public accessor for tooltip coordinate mapping */
+  getPlotLayout() { return this.computeLayout() }
+
+  /** Current series data for tooltip value lookup */
+  getSeries() { return this._series }
+
   // ── Shared: compute layout and draw axes ─────────────────────
   private computeLayout(): {
     plotX: number; plotY: number; plotW: number; plotH: number
@@ -440,10 +447,13 @@ const Graph: GraphType = (props) => {
   const { height = 15, xLabels = [], yRange, yTicks = 5, yFormat, variant = 'area', stripeColors, children } = props
 
   const palette = getThemePalette(theme)
+  const containerRef = useRef<any>(null)
+  const plotRef = useRef<GraphPlotRenderable>(null)
+  const { tooltip, show: showTooltip, hide: hideTooltip } = useChartTooltip()
 
   // Collect series data from Graph.Line children
-  const series = useMemo<SeriesData[]>(() => {
-    const result: SeriesData[] = []
+  const seriesWithTitles = useMemo<Array<SeriesData & { title?: string }>>(() => {
+    const result: Array<SeriesData & { title?: string }> = []
     let colorIndex = 0
     React.Children.forEach(children, (child) => {
       if (!React.isValidElement(child)) return
@@ -454,12 +464,18 @@ const Graph: GraphType = (props) => {
       result.push({
         data: childProps.data,
         color,
+        title: childProps.title,
       })
       colorIndex++
     })
     return result
   }, [children, palette])
 
+  // Strip titles for the renderable (it only needs data + color)
+  const series = useMemo<SeriesData[]>(() => {
+    return seriesWithTitles.map((s) => ({ data: s.data, color: s.color }))
+  }, [seriesWithTitles])
+
   // Auto-compute Y range if not provided
   const computedYRange = useMemo<[number, number]>(() => {
     if (yRange) return yRange
@@ -484,21 +500,63 @@ const Graph: GraphType = (props) => {
   // Total height = plot rows + 1 for x-axis labels
   const totalHeight = height + (xLabels.length > 0 ? 1 : 0)
 
+  const handleMouseMove = (evt: OpenTUIMouseEvent) => {
+    const plot = plotRef.current
+    if (!plot) return
+    const layout = plot.getPlotLayout()
+    if (!layout) return
+
+    const allSeries = plot.getSeries()
+    const maxDataLen = Math.max(0, ...allSeries.map((s) => s.data.length))
+    const idx = computeDataIndexFromMouseX({
+      mouseX: evt.x,
+      plotX: layout.plotX,
+      plotW: layout.plotW,
+      dataLength: maxDataLen,
+    })
+    if (idx < 0) {
+      hideTooltip()
+      return
+    }
+
+    const label = interpolateXLabel({ dataIndex: idx, dataLength: maxDataLen, xLabels })
+    const lines = allSeries
+      .map((s, si) => ({ series: s, title: seriesWithTitles[si]?.title }))
+      .filter(({ series }) => idx < series.data.length)
+      .map(({ series, title }) => {
+        const value = series.data[idx]!
+        const prefix = title || label
+        return formatTooltipLine(prefix, Number(value.toFixed(2)))
+      })
+    if (lines.length === 0) {
+      hideTooltip()
+      return
+    }
+    // Always show x-axis label as the header line
+    lines.unshift(label)
+    showTooltip({ x: evt.x, y: evt.y, lines })
+  }
+
   return (
-    <graph-plot
-      width="100%"
-      height={totalHeight}
-      series={series}
-      xLabels={xLabels}
-      yMin={computedYRange[0]}
-      yMax={computedYRange[1]}
-      yTicks={yTicks}
-      yFormat={yFormat}
-      axisColor={theme.textMuted}
-      variant={variant}
-      stripeColor1={resolvedStripe1}
-      stripeColor2={resolvedStripe2}
-    />
+    <box ref={containerRef} width="100%" onMouseOut={hideTooltip}>
+      <ChartTooltip tooltip={tooltip} containerRef={containerRef} />
+      <graph-plot
+        ref={plotRef}
+        width="100%"
+        height={totalHeight}
+        series={series}
+        xLabels={xLabels}
+        yMin={computedYRange[0]}
+        yMax={computedYRange[1]}
+        yTicks={yTicks}
+        yFormat={yFormat}
+        axisColor={theme.textMuted}
+        variant={variant}
+        stripeColor1={resolvedStripe1}
+        stripeColor2={resolvedStripe2}
+        onMouseMove={handleMouseMove}
+      />
+    </box>
   )
 }