LineChart
A responsive line chart — Attio's Reports historical charts.
Attio's historical/time-series chart: a brand line with a soft area fill over dashed horizontal gridlines, a value axis on the left, and category labels below. The line is a stretched SVG with a non-scaling stroke (stays crisp at any width); the dots are HTML so they stay round. Renders role="img" with a summary.
Preview
New companies over time Companies
02468
AprMayJunJulAug
Created · Month
Usage
import { LineChart } from "crisp";
<LineChart
data={[
{ label: "Apr", value: 2 },
{ label: "Aug", value: 8 },
]}
xAxisTitle="Created · Month"
/>;API
| Prop | Type | Default | Description |
|---|---|---|---|
data | { label, value }[] | — | One point per entry. |
height | number | 240 | Overall height in px. |
max | number | auto | Force the axis maximum. |
ticks | number | 5 | Number of value gridlines (includes 0). |
color | string | brand | Line colour. |
area | boolean | true | Fill the area under the line. |
dots | boolean | true | Draw a dot at each point. |
format | (n: number) => string | — | Formats ticks and point values. |
xAxisTitle | ReactNode | — | Centred title below the labels. |