Installation

Prerequisites

chartcn requires React 19+ and Tailwind CSS 4+.

Install

Since chartcn is currently distributed as an internal package within this monorepo, add it as a workspace dependency:

pnpm add @exhibit/charts

Peer dependencies

The chart components depend on recharts and d3-geo (for the choropleth map). Install them alongside:

pnpm add recharts d3-geo

Import the styles

Add the chart theme CSS custom properties to your global stylesheet. These define the --chart-1 through --chart-5 colour tokens used by all components:

@import "@exhibit/charts/styles.css";

Or define them manually in your CSS:

:root {
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
}

Tailwind CSS setup

Ensure Tailwind scans the chart package source for class names. In Tailwind v4, add a @source directive:

@source "../../../packages/charts/src/**/*.{ts,tsx}";

Usage

Import components directly:

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

// Composable geo charts
import { Chart, Choropleth, Boundary, PointLayer } from "@exhibit/charts";

All charts use <Chart> as the universal wrapper. Cartesian charts pass data and xDataKey; geo charts omit these and use <Choropleth> or <Boundary> children instead.