React Area Chart Component

Installation

pnpm add krz-ui

import { AreaChart } from "krz-ui";

<AreaChart data={visitors} index="week" series={["visitors"]} title="Weekly visitors" />

Prop	Type	Description
`curved`	`boolean`	Smooth monotone curves. Default true.
`data`	`Record<string, string \| number \| null>[]`	One row per x-axis point.
`index`	`string`	Key of the x-axis label in each row.
`series`	`(string \| { key, label?, color? })[]`	Value keys to plot. Colors follow the palette in order; pass `color` to pin one.
`height`	`number`	Plot height in px. Default 240.
`title / description`	`ReactNode`	Caption above the chart; also used for the accessible name.
`valueFormatter`	`(value: number) => string`	Formats tooltip and table values.
`tickFormatter`	`(value: number) => string`	Formats y-axis ticks. Default: comma'd, compact from 10k.
`showLegend`	`boolean`	Defaults to shown for 2+ series.
`tableToggle`	`boolean`	Show the “Show data” table toggle. Default true.
`className / style / ref`	`—`	All go to the outer <figure>. See Customization.
`classNames`	`{ header?, title?, description?, plot?, legend?, legendItem?, tableToggle?, table?, tooltip? }`	Extra classes for inner parts.