Charts, beautifully composed

Composable React chart primitives with spring-animated interactions. Open source, built on shadcn patterns.

Get startedBrowse docs
<Chart data={data} xDataKey="month">

  <LineMark

    dataKey="value"

    color="#3b82f6"

    curve="monotoneX"

  />

  <XAxis />

  <YAxis />

  <Cursor axis="x" />

  <Tooltip />

</Chart>

Get started

One command, full source

Install individual chart components from the shadcn registry. You own the code — no runtime dependency.

Terminal
$ npx shadcn@latest add chartcn.dev/r/area-chart
<Chart data={analytics} xDataKey="date">

  <AreaMark

    dataKey="sessions"

    color="#3b82f6"

    fillOpacity={0.1}

    clipToActive

  />

  <LineMark

    dataKey="sessions"

    gradient={{ from: "#3b82f6", to: "#22c55e" }}

    strokeWidth={2}

  />

  <Cursor axis="x" spring />

  <Tooltip />

  <Legend />

  <XAxis />

  <YAxis />

</Chart>

API

Composable by design

Every chart is assembled from focused primitives. Marks, axes, and interactions are React components — combine them however you need.

Layer marks freely
Stack LineMark, BarMark, and AreaMark in any combination. They share scales automatically.
Polymorphic interactions
Tooltip and Legend auto-detect their context. Drop them in — no configuration needed.
Type-safe data keys
Generic props constrain dataKey to your data shape. Mistakes are caught at compile time.

Performance

Interactions that never stutter

0

re-renders on hover

Cursors, tooltips, and active dots position themselves via direct DOM mutation in a rAF loop.

60fps

spring-animated interactions

Every hover effect uses requestAnimationFrame with time-based exponential decay for jank-free motion.

keyof T

generic data constraints

Data keys are constrained to your schema at the type level. Invalid props are caught at compile time.

Built for real applications

Choropleth maps

Geographic visualization with multi-level drill-down, breadcrumbs, and quantile color scales.

Brush & zoom

BrushSlider for time-series navigation. Select a range to zoom, with smooth animated transitions.

Voronoi snapping

PointLayer uses d3-delaunay for instant nearest-point lookup across scattered data.

LTTB downsampling

Largest-triangle-three-buckets algorithm renders dense time-series without jank.

Skeleton loading

DefaultChartSkeleton renders chart-shaped placeholders that match your layout during data fetches.

Reference lines

Annotate thresholds, targets, and averages with ReferenceLine — static or data-driven.

Start building

Read the docs, explore the showcase, or install your first chart.

Get startedShowcase