Component

Charts

Composable SVG chart primitives. A Chart provides scales and dimensions through context; primitives like Bars, Line, and PieChart consume it.

Bar chart

Bars renders a band-scaled bar for each datum.

Line chart

Compose Line with Circles to add point markers.

Pie chart

PieChart is self-contained — it draws its own arcs and accepts a custom colors palette.

Installation

$pnpm add @refraction-ui/react-charts

Usage

tsx

import { Chart, Bars } from '@refraction-ui/react-charts'

const data = [
  { month: 'Jan', value: 32 },
  { month: 'Feb', value: 48 },
  { month: 'Mar', value: 41 },
]

export function Revenue() {
  return (
    <Chart width={520} height={280} margin={{ top: 16, right: 16, bottom: 32, left: 32 }}>
      <Bars data={data} x={(d) => d.month} y={(d) => d.value} fill="currentColor" />
    </Chart>
  )
}

Chart props

Prop	Type	Default	Description
`width`	`number`	`600`	Overall width of the SVG canvas in pixels.
`height`	`number`	`400`	Overall height of the SVG canvas in pixels.
`margin`	`Partial<Margin>`	--	Inner padding `{ top, right, bottom, left }` reserved for axes and labels.
`children`	`ReactNode`	--	Chart primitives (`Bars`, `Line`, `Circles`, axes) rendered inside the chart context.

Series props (Bars / Line / Circles)

Prop	Type	Default	Description
`data`	`T[]`	--	Array of datum objects to plot.
`x`	`(d: T) => string \| number`	--	Accessor returning the x value for a datum (`string` for `Bars`, `number` for `Line`/`Circles`).
`y`	`(d: T) => number`	--	Accessor returning the y value for a datum.
`fill / stroke`	`string`	`'currentColor'`	Color of the rendered marks. Inherits text color via `currentColor`.