Usage
Wiring your own data into a chart, and composing the shared primitives.
The shape of a chart
Every chart is a React component that takes data and a config. The config maps each series to a label and a colour; the data is a plain array of objects.
const data = [
{ month: "Jan", revenue: 4200, forecast: 4000 },
{ month: "Feb", revenue: 4800, forecast: 4400 },
{ month: "Mar", revenue: 5100, forecast: 4900 },
];
const config = {
revenue: { label: "Revenue", color: "var(--chart-1)" },
forecast: { label: "Forecast", color: "var(--chart-2)" },
};Colours come from CSS variables rather than literals, which is what lets the same chart work in light and dark without a second definition.
The primitives
Charts are composed rather than monolithic. The shared pieces are:
| Primitive | Role |
|---|---|
| Container | Sizing, responsiveness, and the config context |
| Axis | Ticks, labels, and formatting |
| Grid | Background rules |
| Legend | Series keys, driven by the config |
| Tooltip | Hover detail |
Because they are separate, dropping the legend or restyling the tooltip is a change to one element, not a fork of the whole chart.
Owning the code
The component is in your repository, so change it. That is the point of the copy-paste model: there is no upstream version to fight when your design calls for something the library did not anticipate.
The trade-off is that you do not get updates for free. If you want them, keep the library in one internal package and re-run the CLI there.
Accessibility
Charts render real SVG with labelled series rather than a canvas blob. Keep the legend and axis labels: they are what make the chart readable to a screen reader and to anyone who cannot distinguish two of your series by colour.