Charts

Line & area chart

Lines that grow in when they scroll into view and spring between datasets with a liquid overshoot. A crosshair snaps to the nearest point; one glass tooltip lists every series.

Paste it into ChatGPT, Claude, Cursor or v0.

Usage

React

import { AreaChart, LineChart } from '@vizzele/react';

<AreaChart
  title="Visitors per month"
  data={[
    { month: 'Jan', web: 4200, app: 2100 },
    { month: 'Feb', web: 5100, app: 2600 },
    { month: 'Mar', web: 4800, app: 3400 },
  ]}
  index="month"
  series={[
    { key: 'web', label: 'Web' },
    { key: 'app', label: 'App' },
  ]}
/>

Props

Prop	Type	Default	Description
`data`	`ChartRow[]`	—	One object per x position.
`index`	`string`	—	Key holding the x value (category or date).
`series`	`ChartSeries[]`	—	{ key, label?, color? } — up to five, colored in the palette’s fixed order (never cycled).
`title`	`string`	—	Accessible name and caption of the data table.
`height`	`number`	`260`	Plot height in px.
`valueFormatter`	`(v: number) => string`	`compact`	Formats ticks, labels, tooltip and table (1,284 / 12.9K).
`xFormatter`	`(x) => string`	—	Formats the x labels.
`legend`	`boolean`	`≥ 2 series`	Show the legend.
`yMax`	`number`	—	Fix the top of the y scale.
`area`	`boolean`	`false`	Wash under each line.
`curve`	`'smooth' \| 'linear'`	`'smooth'`	Monotone curve never overshoots the data.
`endLabels`	`boolean`	`≤ 4 series`	Value at the end of each line; skipped when labels would collide.

Usage

Props

Accessibility