Component

Line Chart

A responsive multi-series line chart. Every series shares one y-scale so they stay comparable, the SVG stretches to its container, and a hover or keyboard crosshair shows every series at that point. Use the lower-level Charts primitives when you need a custom composition.

Single series

One series fills the area under its line by default.

Revenue

Multiple series

Series share one y-scale; colours default to the theme chart palette. Focus the chart and use the arrow keys to move the crosshair.

VisitorsSign-ups

Formatted values

formatValue formats the tooltip; formatTick formats the y-axis.

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { LineChart } from '@refraction-ui/react'

export function RevenueChart() {
  return (
    <LineChart
      ariaLabel="Revenue by month"
      labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}
      series={[{ id: 'revenue', name: 'Revenue', data: [12, 18, 15, 24, 28, 35] }]}
      formatValue={(v) => `$${v}k`}
    />
  )
}

Props

Prop	Type	Default	Description
`series`	`{ id: string; name: string; color?: string; data: number[] }[]`	--	Series to plot on one shared y-scale. color defaults to --chart-1…5 by position.
`labels`	`string[]`	--	One category label per data point.
`ariaLabel`	`string`	--	Accessible name of the chart image (required).
`height`	`number`	`230`	Rendered height in px (also the viewBox height).
`width`	`number`	`760`	Fallback width for the server render / before measuring. On the client the chart measures its container and draws at that width, so axis text keeps its size. (Astro renders statically at this width.)
`formatValue`	`(value: number) => string`	`rounds`	Formats values in the tooltip.
`formatTick`	`(value: number) => string`	--	Formats y-axis ticks. Defaults to formatValue. Ticks are round 1-2-5 steps on a nice max, so they format cleanly.
`area`	`boolean`	`single series only`	Fill the area under each line.
`showLegend`	`boolean`	`true`	Show the legend under the chart.
`className`	`string`	--	Merged onto the root element.