Multi Line Chart
A multi-series line chart with an interactive, toggleable legend.
"use client";import { MultiLineChart } from "@reva/ui";const data = [{ month: "January", desktop: 186, mobile: 80, tablet: 40 },{ month: "February", desktop: 305, mobile: 200, tablet: 110 },{ month: "March", desktop: 237, mobile: 120, tablet: 90 },{ month: "April", desktop: 173, mobile: 190, tablet: 60 },{ month: "May", desktop: 209, mobile: 130, tablet: 140 },{ month: "June", desktop: 264, mobile: 140, tablet: 120 },];const series = [{ key: "desktop", label: "Desktop", color: "var(--chart-1)" },{ key: "mobile", label: "Mobile", color: "var(--chart-2)" },{ key: "tablet", label: "Tablet", color: "var(--chart-3)", defaultVisible: false },];export function MultiLineChartHeroDemo() {return ( <MultiLineChart data={data} series={series} xKey="month" xTickFormatter={(value) => String(value).slice(0, 3)} label="Visitors by device" />);}Usage
import { MultiLineChart } from "@reva/ui";
<MultiLineChart
data={[
{ month: "January", desktop: 186, mobile: 80 },
{ month: "February", desktop: 305, mobile: 200 },
]}
series={[
{ key: "desktop", label: "Desktop", color: "var(--chart-1)" },
{ key: "mobile", label: "Mobile", color: "var(--chart-2)" },
]}
xKey="month"
/>A multi-series line chart built on Recharts via our ChartContainer. It draws horizontal grid lines and footnote-style x-axis labels, but no y-axis — values surface in the hover tooltip. Colours default to the categorical --chart-1..7 ramp and can be overridden per series. Pass data / series with stable references.
The legend is interactive
Each series renders as a toggle pill (StatusBadge-style) beneath the chart. Clicking a pill shows or hides its line and the chart rescales. Seed the initial state per series with defaultVisible (default true).
Examples
Default visibility
In the hero above, the Tablet series sets defaultVisible: false, so it starts hidden — click its pill to bring it in. Use this to keep a busy chart legible by default while still offering every series.
Forecast over years
A numeric x-axis (years) with two series. The x labels thin automatically to avoid crowding.
const data = [{ year: 2027, business: 9, household: 7 },{ year: 2030, business: 13, household: 11 },{ year: 2033, business: 16, household: 15 },{ year: 2036, business: 21, household: 19 },{ year: 2039, business: 27, household: 26 },{ year: 2042, business: 34, household: 35 },{ year: 2045, business: 45, household: 48 },];const series = [{ key: "business", label: "Business", color: "var(--chart-positive-fill)" },{ key: "household", label: "Household", color: "var(--chart-accent-fill)" },];<MultiLineChart data={data} series={series} xKey="year" label="Wealth forecast" />Props
MultiLineChart
| Prop | Type | Default | Description |
|---|---|---|---|
data | Array<Record<string, number | string>> | — | Required. Rows: the x value (xKey) plus a number per series key. |
series | MultiLineChartSeries[] | — | Required. Series, in legend order. |
xKey | string | — | Required. Row key for the x-axis. |
xTickFormatter | (value: string | number) => string | — | Format the x-axis tick labels. |
height | number | 240 | Chart height in px; width fills the container. |
label | string | — | Accessible label for the chart region. |
className | string | — | Sizing / spacing hook. |
MultiLineChartSeries
| Field | Type | Default | Description |
|---|---|---|---|
key | string | — | Required. Key into each data row. |
label | string | — | Required. Legend pill + tooltip label. |
color | string | var(--chart-{n}) | Line + dot colour — any CSS colour or token var. |
defaultVisible | boolean | true | Whether the series starts visible. |