Package Exports

@derpdaderp/chartkit
@derpdaderp/chartkit/themes

Readme

@derpdaderp/chartkit

A lightweight, zero-dependency charting library for React and Next.js. Built with pure SVG for minimal bundle size and maximum performance.

Features

14 Chart Components - Lines, bars, areas, scatter, gauges, and more
17 Beautiful Themes - Dark and light themes inspired by popular tools
Responsive by Default - Sparkline & MiniArea auto-fill containers
Auto Theme Switching - useAutoTheme hook for dark/light mode
Zero Dependencies - Pure SVG, no D3 or heavy charting libraries
TypeScript First - Full type safety with comprehensive types
Server Component Ready - Works with React Server Components
Tiny Bundle - ~15KB gzipped for the entire library

Installation

npm install @derpdaderp/chartkit
# or
yarn add @derpdaderp/chartkit
# or
pnpm add @derpdaderp/chartkit

Quick Start

import { Sparkline, MonitorLine, useAutoTheme } from '@derpdaderp/chartkit'

// Sparkline - responsive by default, fills container
<Sparkline data={[10, 25, 15, 30, 22]} theme="midnight" />

// MonitorLine with responsive mode
<MonitorLine
  data={data}
  dataKey="cpu"
  label="CPU Usage"
  theme="neon"
  responsive
  height={300}
/>

// Auto dark/light theme switching
function Chart({ data }) {
  const theme = useAutoTheme({ light: 'sunset', dark: 'neon' });
  return <MonitorLine data={data} dataKey="value" theme={theme} responsive />;
}

Components

Line & Area Charts

Sparkline - Minimal inline charts
MiniArea - Area charts with gradient fills
MonitorLine - Multi-series line charts with tooltips
StackedArea - Stacked area charts with legend

Bar Charts

BarChart - Grouped and stacked bar charts

Circular Charts

DonutChart - Donut/pie charts with center content
ProgressRing - Circular progress indicators
GaugeChart - Semicircular gauges with ranges

Specialized Charts

ScatterChart - Scatter and bubble charts
ComboChart - Combined line, bar, and area with dual Y-axis
Heatmap - GitHub-style activity heatmaps
SpikeChart - Event/activity spike visualization
KpiCard - KPI cards with sparklines and deltas

Utilities

Legend - Standalone interactive legend
ResponsiveChart - Auto-resizing container

Themes

ChartKit includes 17 built-in themes:

Dark Themes (13): midnight, emerald, mono, slate, arctic, orchid, obsidian, neon, mocha, owl, retro, copper, rose

Light Themes (4): sunset, silver, pearl, latte

import { ThemeProvider } from '@derpdaderp/chartkit'

<ThemeProvider theme="neon">
  {/* Your charts */}
</ThemeProvider>

Custom Themes

import { ThemeProvider } from '@derpdaderp/chartkit'

const customTheme = {
  name: 'custom',
  background: '#1a1a2e',
  foreground: '#eaeaea',
  muted: '#4a4a6a',
  primary: '#00d9ff',
  secondary: '#ff6b6b',
  tertiary: '#4ecdc4',
  quaternary: '#ffe66d',
  success: '#00c853',
  warning: '#ffab00',
  danger: '#ff5252',
  gridColor: 'rgba(255,255,255,0.1)',
  gridDasharray: '2,2',
}

<ThemeProvider theme={customTheme}>
  {/* Your charts */}
</ThemeProvider>

Advanced Features

Annotations

Add reference lines and areas to highlight thresholds:

<MonitorLine
  data={data}
  xKey="timestamp"
  series={[{ key: 'value', name: 'Value' }]}
  annotations={[
    { type: 'line', axis: 'y', value: 80, label: 'Warning', color: 'warning' },
    { type: 'area', axis: 'y', start: 90, end: 100, label: 'Critical', color: 'danger' },
  ]}
/>

Click Events

Handle clicks on data points:

<BarChart
  data={data}
  xKey="category"
  series={[{ key: 'value', name: 'Value' }]}
  onBarClick={(event) => {
    console.log(event.dataKey, event.dataPoint, event.index)
  }}
/>

Custom Tooltips

<MonitorLine
  data={data}
  xKey="timestamp"
  series={[{ key: 'value', name: 'Value' }]}
  renderTooltip={({ dataPoint, seriesConfig }) => (
    <div className="custom-tooltip">
      <strong>{dataPoint.timestamp}</strong>
      <span>{dataPoint.value}ms</span>
    </div>
  )}
/>

Dual Y-Axis (ComboChart)

<ComboChart
  data={data}
  xKey="month"
  leftAxis={{
    series: [{ key: 'revenue', name: 'Revenue', type: 'bar' }],
    label: 'Revenue ($)',
  }}
  rightAxis={{
    series: [{ key: 'growth', name: 'Growth %', type: 'line' }],
    label: 'Growth (%)',
  }}
/>

TypeScript

All components are fully typed. Import types as needed:

import type {
  ChartTheme,
  ThemeName,
  Annotation,
  ChartClickEvent,
  TooltipRenderProps,
} from '@derpdaderp/chartkit'

Browser Support

ChartKit supports all modern browsers (Chrome, Firefox, Safari, Edge). IE11 is not supported.

License

MIT

JSPM