Introduction

chartcn is a library of composable, production-ready chart components for React, built on d3-geo and shadcn/ui design patterns.

Charts, beautifully composed.

Features

• Universal <Chart> wrapper — one container for cartesian, geographic, and point-data charts
• Composable primitives — <LineMark>, <BarMark>, <Choropleth>, <Boundary>, <PointLayer>, <DrillDown>, <Legend>, <Tooltip>
• Polymorphic components — <Tooltip> and <Legend> auto-detect cartesian vs geo context
• Built-in states for loading skeletons, error messages, and empty data
• Theming via CSS custom properties, compatible with any shadcn/ui theme
• TypeScript-first with strict generic props for type-safe data binding

Design principles

1. <Chart> wraps everything — cartesian charts pass data + xDataKey; geo charts omit these for shell mode.
2. Compose, don't configure — add <LineMark>, <Grid>, <Cursor>, <Legend> as children, not as props.
3. CSS custom properties — colours come from --chart-1 through --chart-5, overridable per-series.
4. Polymorphic shared primitives — <Tooltip>, <Legend> adapt to their context automatically.

Quick start

import { Chart, LineMark, BarMark, Legend, Tooltip, XAxis, YAxis } from "@exhibit/charts";

const data = [
  { month: "Jan", sales: 120, target: 100 },
  { month: "Feb", sales: 150, target: 130 },
];

export function MyChart() {
  return (
    <Chart data={data} xDataKey="month" height={360}>
      <XAxis />
      <YAxis />
      <BarMark dataKey="sales" name="Sales" color="#3b82f6" />
      <LineMark dataKey="target" name="Target" color="#f59e0b" />
      <Legend />
      <Tooltip />
    </Chart>
  );
}