chartkit

A composable React charting library, built the same way recharts is used day to day, but written from scratch with zero runtime dependencies. Line, area, bar, candlestick, pie, donut, scatter, and radar charts — one consistent API across all of them, so it doesn't matter if you're plotting stock/crypto prices, survey results, or server metrics.

Why another chart library

Most chart libraries either drag in D3 as a dependency, lock you into a rigid preset look, or don't have a real answer for financial/OHLC data without a second library bolted on. chartkit is one small package that covers the common cases teams actually need — general statistics and candlestick/price charts — with the same scales, tooltip, and legend behavior everywhere, so you only have to learn it once.

Installation

npm install @core-ease/chartkit

React and ReactDOM are peer dependencies (17+). Nothing else gets pulled in — no D3, no date library, no CSS framework.

Quick start

import { ChartContainer, LineChart } from '@core-ease/chartkit';

const data = [
  { month: 'Jan', revenue: 4200, cost: 3100 },
  { month: 'Feb', revenue: 4800, cost: 3300 },
  { month: 'Mar', revenue: 5100, cost: 3600 },
  { month: 'Apr', revenue: 4950, cost: 3400 },
];

function RevenueChart() {
  return (
    <ChartContainer height={320}>
      <LineChart
        data={data}
        xKey="month"
        series={[
          { dataKey: 'revenue', name: 'Revenue', color: '#6366f1' },
          { dataKey: 'cost', name: 'Cost', color: '#f97316' },
        ]}
      />
    </ChartContainer>
  );
}

ChartContainer measures its parent with a ResizeObserver and hands width/height down to whichever chart is inside it, so charts stay responsive without you tracking any state. Pass a fixed width/height directly to a chart instead if you don't want that behavior.

Every cartesian chart (line, area, bar, candlestick, scatter) shares the same data + xKey + series shape, the same hover tooltip with a legend you can click to hide/show a series, and the same grid/axis rendering — so switching from one chart type to another is usually a one-line change.

Chart types

Line

<LineChart data={data} xKey="month" series={series} curved showDots />

curved switches from straight segments to a smooth Catmull-Rom-style curve. showDots toggles the point markers.

Area

<AreaChart data={data} xKey="month" series={series} stacked fillOpacity={0.3} />

Set stacked for a stacked area chart (each series builds on top of the previous one) or leave it off for overlapping areas.

Bar

<BarChart data={data} xKey="month" series={series} stacked={false} barRadius={4} />

Supports grouped (side-by-side) or stacked bars via the same stacked flag.

Candlestick — for crypto & financial data

import { CandlestickChart } from '@core-ease/chartkit';

const ohlc = [
  { time: '09:00', open: 61200, high: 61800, low: 60900, close: 61650 },
  { time: '10:00', open: 61650, high: 62100, low: 61400, close: 61300 },
  { time: '11:00', open: 61300, high: 61500, low: 60700, close: 61050 },
];

<CandlestickChart data={ohlc} xKey="time" upColor="#22c55e" downColor="#ef4444" />

The key names (open/high/low/close) are configurable via openKey, highKey, lowKey, closeKey if your data source uses different field names — handy when you're piping data straight from an exchange API. The tooltip shows all four values automatically.

Scatter / bubble

<ScatterChart
  data={points}
  xKey="marketCap"
  series={[{ dataKey: 'volume24h', name: '24h Volume' }]}
  sizeKey="priceChange"
/>

Add sizeKey to turn it into a bubble chart — point radius scales with that field.

Pie & donut

import { PieChart, DonutChart } from '@core-ease/chartkit';

<PieChart data={[{ name: 'BTC', value: 45 }, { name: 'ETH', value: 30 }, { name: 'Other', value: 25 }]} dataKey="value" width={320} height={320} />
<DonutChart data={holdings} dataKey="value" nameKey="name" width={320} height={320} />

DonutChart is just PieChart with a sensible default innerRadius — pass your own innerRadius on either one if you want a specific ring thickness.

Radar

<RadarChart
  data={[{ metric: 'Speed', A: 80, B: 60 }, { metric: 'Reliability', A: 70, B: 90 }]}
  axisKey="metric"
  series={[{ dataKey: 'A', name: 'Server A' }, { dataKey: 'B', name: 'Server B' }]}
  width={360}
  height={360}
/>

Good for comparing multiple entities across several dimensions at once — benchmark results, skill assessments, that kind of thing.

Tooltip and legend

Every chart shows a tooltip on hover by default (showTooltip) and a legend underneath (showLegend). Clicking a legend entry hides that series from the chart and recalculates the axes — no extra wiring needed. Pass tooltipFormatter={(value, name) => ...} to control how numbers are displayed (currency, percentages, decimal places, whatever you need).

Custom rendering

If none of the built-in chart types fit exactly what you need, CartesianChart is the same engine all of them are built on, and it's exported directly:

import { CartesianChart } from '@core-ease/chartkit';

<CartesianChart
  data={data}
  xKey="month"
  series={series}
  width={600}
  height={320}
  renderSeries={({ data, xScale, yScale, series }) => (
    // return any SVG here — you get fully computed scales and pixel coordinates
  )}
/>

This is how LineChart, AreaChart, BarChart, CandlestickChart, and ScatterChart are all implemented internally — there's no separate "advanced" API, it's the same one.

Styling

Colors default to a 10-color categorical palette if you don't set one per series. Everything renders as plain SVG/HTML with inline styles, so there's no CSS file to import and no class-name collisions to worry about — override colors, stroke widths, and radii through props.

TypeScript

Written entirely in TypeScript, ships its own declaration files, and every chart's props (LineChartProps, CandlestickChartProps, etc.) are exported individually so you can wrap or extend them in your own components.

Package layout

src/
  core/         scales, tick generation, SVG path builders, color palette,
                the ResizeObserver-based sizing hook
  components/   shared pieces: ChartContainer, grid, axes, tooltip, legend
  charts/       CartesianChart (the shared engine) plus every chart type
  types.ts      shared type definitions

License

MIT