BarChart
A responsive bar chart — Attio's Reports dashboard chart.
The chart behind Attio's Reports dashboards: brand bars with rounded tops over dashed horizontal gridlines, a value axis on the left, and category labels below. Pure CSS (no SVG or chart dependency), so it scales with its container. Renders role="img" with an accessible summary. Pair it with a Card for the "report card" look.
Preview
Companies by Country Count Companies
Usage
import { BarChart } from "crisp";
<BarChart
data={[
{ label: "France", value: 1 },
{ label: "United States", value: 8 },
]}
xAxisTitle="Primary location › Country"
/>;API
| Prop | Type | Default | Description |
|---|---|---|---|
data | { label, value }[] | — | One bar per entry. |
height | number | 240 | Overall height in px. |
max | number | auto | Force the axis maximum (otherwise a nice max is derived). |
ticks | number | 5 | Number of value gridlines (includes 0). |
color | string | brand | Bar colour. |
format | (n: number) => string | — | Formats ticks and bar values (e.g. currency). |
xAxisTitle | ReactNode | — | Centred title below the category labels. |