React Line Chart Component

day	Search	API	Web
Mon	240 ms	182 ms	124 ms
Tue	228 ms	176 ms	131 ms
Wed	251 ms	191 ms	118 ms
Thu	219 ms	168 ms	122 ms
Fri	262 ms	204 ms	140 ms
Sat	205 ms	158 ms	109 ms
Sun	198 ms	150 ms	102 ms

Installation

pnpm add krz-ui

Usage

import { LineChart } from "krz-ui";

<LineChart
  data={latency}
  index="day"
  series={[{ key: "api", label: "API" }, { key: "web", label: "Web" }]}
  valueFormatter={(v) => `${v} ms`}
/>

API Reference

Prop	Type	Description
`curved`	`boolean`	Smooth monotone curves. Default true.
`startAtZero`	`boolean`	Start the y-axis at zero. Default false.
`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.