Beautiful charts for React. Zero config.
Documentation | Demo | Components
ChartKit is a lightweight React charting library for dashboards that look as good as they perform. 14 components, 17 themes, ~15KB gzipped, zero dependencies.
npm install @derpdaderp/chartkitimport { LineChart, KpiCard } from '@derpdaderp/chartkit';
function Dashboard({ data }) {
return (
<div>
<KpiCard
label="Revenue"
value={284500}
delta={12.5}
data={data}
theme="midnight"
format={(v) => `$${(v / 1000).toFixed(0)}K`}
/>
<LineChart
data={data}
series={[{ key: 'value', label: 'Sales', area: true }]}
theme="midnight"
curve="monotone"
responsive
/>
</div>
);
}- 14 Chart Components - Lines, bars, areas, donuts, gauges, heatmaps, and more
- 17 Curated Themes - Dark and light themes that look great out of the box
- ~15KB gzipped - Tiny bundle size, zero dependencies
- TypeScript First - Full type safety with autocomplete for every prop
- Dual Y-Axis - Display multiple scales in LineChart
- Responsive - Charts automatically resize to fit their container
- Interactive - Tooltips, click handlers, and hover states
| Component | Description |
|---|---|
LineChart |
Multi-series lines with dual Y-axis, curves, and area fills |
BarChart |
Vertical and horizontal bar charts |
DonutChart |
Donut/pie charts with center content |
StackedArea |
Stacked area charts with legend |
ScatterChart |
Scatter and bubble charts |
ComboChart |
Combined line, bar, and area |
Heatmap |
GitHub-style activity heatmaps |
GaugeChart |
Semicircular gauges with ranges |
KpiCard |
Metric cards with sparklines and deltas |
Sparkline |
Minimal inline trend charts |
MiniArea |
Small area charts with gradients |
ProgressRing |
Circular progress indicators |
SpikeChart |
Event/activity spike visualization |
CandlestickChart |
Financial OHLC charts with zoom/pan |
17 built-in themes:
Dark: midnight, emerald, mono, slate, arctic, orchid, obsidian, neon, mocha, owl, retro, copper, rose
Light: sunset, silver, pearl, latte
import { useAutoTheme } from '@derpdaderp/chartkit';
// Auto-switch based on system preference
const theme = useAutoTheme({ light: 'sunset', dark: 'midnight' });Full documentation and examples at chartkit.dev
Created by @toddo, founder of BuySellAds.
MIT