LineChart
Charts

LineChart

Displays line or area series. Values use application-defined units. The y-axis domain derives from the data.

Props

LineChartProps props
PropTypeDefaultDescription
seriesChartSeries[]—One or more line/area series with values, color, and optional label.
heightnumber84Chart height in pixels.
yLabels[string, string, string] | false—Custom axis labels. Pass false to hide entirely.
minnumber—Pin the bottom of the y domain.
maxnumber—Pin the top of the y domain.
formatValue(value: number) => string—Formats the derived y-axis labels.
xLabelsstring[]—X-axis category labels.
legend{ label: string; color: string }[]—Explicit legend entries. Auto-derived from series labels when omitted.
renderTooltip(index: number) => ReactNode—Tooltip for hover crosshair. Use ChartTooltipHeader/ChartTooltipRow for a styled tooltip.
onHoverChange(index: number | null) => void—Sync crosshairs across multiple charts.
hoverIndexnumber | null—Controlled hover index for synced charts.
xLabelEverynumber—Render every nth x-axis label when labels need thinning.

Usage

Single area series

LineChart with area

Multiple series with tooltip

LineChart with tooltip

With x-axis labels

LineChart with xLabels

Tooltips

Compose custom tooltips with ChartTooltipHeader and ChartTooltipRow. The tooltip flips sides past the horizontal midpoint of the card so it stays inside the card.

Tooltip compositionTSX
import {
  LineChart,
  ChartTooltipHeader,
  ChartTooltipRow,
} from "@solarius/onset";

<LineChart
  series={[
    { values: cpuData, color: "var(--m-color-primary)", label: "CPU" },
    { values: memData, color: "var(--m-color-warn)", label: "Memory" },
  ]}
  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]}%`}
      />
      <ChartTooltipRow
        swatch="var(--m-color-ok)"
        label="Network"
        value={`${net[i]} MB/s`}
      />
    </>
  )}
/>;