ChartTooltipHeader / ChartTooltipRow
Charts

ChartTooltipHeader / ChartTooltipRow

Composable primitives for building custom chart tooltips. Used with the renderTooltip prop across all chart components.

ChartTooltipHeader

ChartTooltipHeader extends HTMLAttributes<HTMLDivElement>. There are no custom props; use it as a title row inside a tooltip.

ChartTooltipRow

Props

ChartTooltipRowProps props
PropTypeDefaultDescription
swatchstring—CSS color for the dot indicator.
labelstring—Series name label.
valuestring—Formatted value for this data point.

ChartTooltipRow extends HTMLAttributes<HTMLDivElement>.

Usage

Custom tooltip composition

Jan 15, 2025
CPU 34%
Memory 62%
ChartTooltip composition

These are typically nested inside a chart's renderTooltip prop, not used standalone. Every chart component auto-flips the tooltip box to the opposite side past the midpoint of the mouse.

ImportTSX
import { ChartTooltipHeader, ChartTooltipRow } from "@solarius/onset";

<LineChart
  series={series}
  renderTooltip={(i) => (
    <>
      <ChartTooltipHeader>Jan {i + 1}, 2025</ChartTooltipHeader>
      <ChartTooltipRow swatch="var(--m-color-primary)" label="CPU" value={`${cpu[i]}%`} />
      <ChartTooltipRow swatch="var(--m-color-warn)" label="Memory" value={`${mem[i]}%`} />
    </>
  )}
/>

// Same pattern works for BarChart, AreaChart, ScatterPlot, etc.
<BarChart
  data={data}
  renderTooltip={(i) => (
    <>
      <ChartTooltipHeader>{data[i].label}</ChartTooltipHeader>
      <ChartTooltipRow swatch="var(--m-color-primary)" label="Complete" value={data[i].segments[0].value} />
      <ChartTooltipRow swatch="var(--m-color-err)" label="Failed" value={data[i].segments[1].value} />
    </>
  )}
/>