react-d3-viz

Cross-platform SVG charts for React (web) and React Native — one codebase, unlimited platforms.

Lightweight, composable, fully themeable — with tooltips, interactive legends, responsive sizing, and smooth animations. SVG-only (no Canvas), tree-shakeable, and TypeScript-first.

▶ Live Playground · View on GitHub · View on npm

Table of Contents

• Why react-d3-viz
• Features
• Quick Start
• 16 Chart Types
• Installation
• Usage Examples
• Responsive Sizing
• Theming & Customization
• Interactivity
• React Native
• Performance & Bundle Size
• Development & Contributing
• Comparison with Other Libraries
• License

Quick Start

import { LineChart } from 'react-d3-viz';

const data = [
  { month: 'Jan', sales: 42 },
  { month: 'Feb', sales: 55 },
  { month: 'Mar', sales: 49 },
];

// Works on web AND React Native — same code, same API
<LineChart data={data} x="month" y="sales" width={600} height={300} />

👉 Try it live in the Playground

Why react-d3-viz

Most chart libraries are web-only. react-d3-viz separates geometry computation (pure JS via d3-scale / d3-shape / d3-array) from rendering (a thin SVG adapter), so the exact same chart code runs on the web (DOM SVG) and on React Native (react-native-svg) without branching logic or duplicate bundles.

Features

| | | |---|---| | 📱 Truly cross-platform | One codebase, unlimited platforms. Web, React Native, or anywhere React runs. Axes, grid, legend, and tooltips all render inside the SVG for pixel-perfect parity. | | 🪶 Lightweight & tree-shakeable | Only d3-scale, d3-shape, d3-array (pure JS) — no Canvas, no DOM, no d3-axis. Ships as ESM with "sideEffects": false. Import one chart, ship one chart. | | 🤝 No lock-in | react / react-dom are optional peer deps (web only). react-native-svg is not a peer dep — web installs never get surprised by native packages. Everything is optional. | | 🔷 TypeScript-first | Full .d.ts for every component, prop, and theme token. Type-safe by default. | | 🎨 Themeable end-to-end | Global ThemeProvider or per-chart overrides. Colors, fonts, animations, axis/grid/tooltip/legend styles — all customizable. | | 📊 16 chart types | Line, Area, Bar (grouped/stacked), Scatter, Bubble, Pie/Donut, Histogram, Radar, Treemap, Sunburst, Heatmap, Waterfall, Sankey, Mekko, Butterfly, Quadrant. | | ✨ Interactive by default | Tooltips (hover/touch), togglable legends, smooth enter animations. No extra setup. | | ✅ Battle-tested | 89+ unit & render tests. Used in production. |

Coming from recharts or victory? Those excel on the web but are web-only. react-d3-viz gives you the same composable, themeable API while running unchanged on React Native too. Compare sizes on Bundlephobia.

Charts

16 interactive chart types — all responsive, themeable, and cross-platform:

LineChart · AreaChart · BarChart · ScatterPlot · BubbleChart · PieChart · Histogram · RadarChart · TreemapChart · SunburstChart · HeatmapChart · WaterfallChart · SankeyDiagram · MekkoChart · ButterflyChart · QuadrantChart

Chart Types & Features

| Chart | Best For | Key Props | |-------|----------|-----------| | LineChart | Time series, trends, multi-line comparison | x, y/series, showPoints, curve, strokeWidth | | AreaChart | Cumulative change, stacked contributions, trends | x, series, curve, fillOpacity, stacked | | BarChart | Categories, comparisons, grouped/stacked data | x, series, stacked, showLegend | | ScatterPlot | Correlation, outlier detection, multi-series patterns | x, y, series, showLegend | | BubbleChart | Three-dimensional comparison (x, y, size) | x, y, value (size), series | | PieChart | Part-to-whole, proportions (+ donut via innerRadius) | data, value, label, innerRadius | | Histogram | Distribution, frequency, binned data | data, value, series, binCount | | RadarChart | Multi-variate comparison, performance profiles | data, series, showGrid, showLegend | | TreemapChart | Hierarchical data, space partitioning, drill-down | data, value, label, childrenKey | | SunburstChart | Deep hierarchies, interactive drill-down exploration | data, value, label, childrenKey | | HeatmapChart | Density, correlation matrices, time-based patterns | data, x, y, value, colorScale | | WaterfallChart | Cumulative flows, P&L, bridge analysis | data, label, value, isTotal | | SankeyDiagram | Flow diagrams, supply chains, user journeys | data (nodes/links), nodePadding | | MekkoChart | Two-dimensional stacked data (width + height) | data (categories/series) | | ButterflyChart | Symmetrical comparison (e.g., population pyramids) | data, series | | QuadrantChart | Four-quadrant analysis, strategic positioning | data, x, y, xAxisLabel, yAxisLabel |

Version Highlights

v1.2.0+ — Latest Additions

ButterflyChart — Side-by-side symmetric bars for population pyramids, A/B comparisons, and bidirectional flow.

v1.1.0 Additions — WaterfallChart (cumulative flows), SankeyDiagram (node-and-link flows), MekkoChart (dual-dimension stacked bars).

🎮 Explore every chart live in the interactive Playground → Edit code, change props, swap data — see changes instantly.

Install

# web
npm i react-d3-viz

# React Native (also install the peer)
npm i react-d3-viz react-native-svg

react (+ react-dom on web) is the only peer dependency. react-native-svg is required only for React Native — you install it there yourself; it is intentionally not a peer dependency, so web installs are never prompted to add native packages.

Usage

The same import works on web and React Native:

import { LineChart, BarChart, PieChart, SunburstChart } from 'react-d3-viz';

// Simple data
const sales = [
  { month: 'Jan', revenue: 42000, profit: 18000 },
  { month: 'Feb', revenue: 55000, profit: 22000 },
  { month: 'Mar', revenue: 49000, profit: 20000 },
];

Basic Examples

Line chart (single series shorthand)

<LineChart data={sales} x="month" y="revenue" width={600} height={300} />

Multi-series with custom styling

<LineChart
  data={sales}
  x="month"
  series={[
    { dataKey: 'revenue', label: 'Revenue', color: '#2563eb' },
    { dataKey: 'profit', label: 'Profit', color: '#10b981' }
  ]}
  showPoints
  showGrid
  showLegend
/>

Stacked bar chart

<BarChart
  data={sales}
  x="month"
  series={[
    { dataKey: 'revenue' },
    { dataKey: 'profit' }
  ]}
  stacked
  showTooltip
/>

Pie chart (+ donut via innerRadius)

const pie = [
  { label: 'Product A', value: 240 },
  { label: 'Product B', value: 180 },
  { label: 'Product C', value: 120 },
];

<PieChart data={pie} value="value" label="label" />

// Donut
<PieChart data={pie} value="value" label="label" innerRadius={0.6} />

Hierarchical sunburst chart

const hierarchy = {
  name: 'root',
  value: 1000,
  children: [
    {
      name: 'Branch A',
      value: 600,
      children: [
        { name: 'Leaf A1', value: 300 },
        { name: 'Leaf A2', value: 300 }
      ]
    },
    { name: 'Branch B', value: 400 }
  ]
};

<SunburstChart
  data={hierarchy}
  value="value"
  label="name"
  childrenKey="children"
/>

💡 All examples are live & editable in the Interactive Playground. Edit the code, change props, and see updates instantly.

Responsive Sizing

Every chart is responsive by default — width="auto" makes it fill its container and re-flow on resize (web) or rotation (native). Measurement is built-in; no wrapper component needed.

// Default: fills parent width, fixed height
<LineChart data={data} x="month" y="sales" height={280} />

// Fully fluid: height derives from width via aspect ratio
<LineChart data={data} x="month" y="sales" height="auto" aspect={1.6} />

// Fixed size: no measurement overhead
<LineChart data={data} x="month" y="sales" width={600} height={300} />

On React Native: wrap the chart in a View with a width — responsive sizing works automatically via onLayout.

<View style={{ width: '100%' }}>
  <LineChart data={data} x="month" y="sales" height={280} />
</View>

Customization & Theming

Per-Chart Props

Every chart accepts a standard set of props for controlling appearance and behavior:

<LineChart
  data={data}
  x="month"
  y="sales"
  width={600}
  height={300}
  margin={{ top: 20, right: 20, bottom: 40, left: 60 }}
  showGrid={true}
  showXAxis={true}
  showYAxis={true}
  showTooltip={true}
  showLegend={true}
  xTickCount={5}
  yTickCount={5}
  formatX={(v) => v.toUpperCase()}
  formatY={(v) => `$${v}k`}
  animate={true}
/>

Series-level props: color, label, curve (line/area), strokeWidth, showPoints, fillOpacity, dashArray, and more.

Global & Per-Chart Theming

Theme Provider — customize globally across your entire app:

<ThemeProvider theme={{
  colors: ['#3b82f6', '#10b981', '#f59e0b'],
  background: { color: '#ffffff' },
  font: { family: 'Inter, sans-serif', size: 12 },
  axis: { stroke: '#d1d5db', textColor: '#374151' },
  grid: { stroke: '#e5e7eb', dashArray: '4 4' },
  tooltip: { backgroundColor: '#1f2937', textColor: '#ffffff' },
  legend: { position: 'bottom' },
  animation: { enabled: true, duration: 400 }
}}>
  <Dashboard />
</ThemeProvider>

Per-chart override — merge over the provider theme for a single chart:

<BarChart
  data={data}
  x="month"
  y="sales"
  theme={{
    colors: ['#ff6b6b', '#4ecdc4'],
    animation: { enabled: false }
  }}
/>

Theme structure:

• colors — array of hex/rgb colors for series
• background, font, axis, grid, tooltip, legend — styling objects
• animation — { enabled: boolean, duration: ms }

Interactivity

• Tooltips — hover (web) or touch (native) shows a crosshair + per-series values.
• Legends — tap/click a legend item to toggle a series; pie/radar slices toggle too.
• Animations — series animate in on mount; disable via animate={false} or theme.animation.enabled.

React Native

Consumers install react-native-svg; the same import works:

import { LineChart } from 'react-d3-viz';

// Wrap in a View with a width — responsive sizing works via onLayout.
<View style={{ width: '100%' }}>
  <LineChart data={data} x="month" y="sales" height={280} />
</View>

Performance & Bundle Size

Lightweight by Design

• Tree-shakeable — "sideEffects": false. Import one chart, ship one chart.
• Pure D3 modules only — d3-scale, d3-shape, d3-array (pure JS, ~30 KB gzipped combined).
• No Canvas, no d3-axis, no DOM — everything is composable SVG.
• Responsive measurement built-in — no layout-shift helper components.
• TypeScript included — .d.ts shipped inline, zero runtime overhead.

Bundle Impact

| Scenario | Size | |----------|------| | Single chart (LineChart) | ~8 KB (gzipped) | | Three charts | ~12 KB (gzipped) | | All 16 charts | ~45 KB (gzipped) |

See Bundlephobia for live build size analysis.

Rendering Performance

• SVG-based — renders on rAF tween loops, smooth 60 FPS animations on modern hardware.
• Responsive without layout thrashing — measurement via ResizeObserver (web) or onLayout (native).
• Optional animations — disable with animate={false} for instant renders.
• No external dependencies for rendering — pure React components, no extra abstractions.

Comparison with Other Libraries

| Feature | react-d3-viz | recharts | victory | nivo | |---------|---|---|---|---| | Cross-platform (web + RN) | ✅ | ❌ | ❌ | ❌ | | Tree-shakeable | ✅ | ⚠️ | ⚠️ | ❌ | | TypeScript support | ✅ Full | ✅ Partial | ✅ Full | ✅ Full | | Chart types | 16 | 11 | 10+ | 27+ | | Themeable | ✅ Full | ✅ Partial | ✅ Partial | ✅ Full | | Bundle size (single chart) | ~8 KB | ~15 KB | ~20 KB | ~45 KB | | SVG only | ✅ | ✅ | ✅ | ✅ Canvas option |

Development & Contributing

Setup

git clone https://github.com/kiranb555/react-d3-viz.git
cd react-d3-viz
npm install

Commands

npm run dev      # Vite dev server (src/App.tsx) — view all 16 charts
npm test         # Vitest — 89+ unit & render tests
npm run build    # tsc → dist/ (preserves .native platform adapters)
npm run lint     # ESLint
npm run storybook # Storybook — interactive component library
npm run shots    # Regenerate README screenshots (requires npm run dev)

Architecture

• src/core/ — Pure-JS compute (scales, shapes, ticks, layout algorithms). No React, no DOM.
• src/primitives/ — SVG primitive adapter. Resolves to web (DOM) or native (react-native-svg) at build time.
• src/components/ — React chart components using CartesianChart frame (x/y charts) or self-contained (radial/hierarchical).
• src/theme/ — Global ThemeProvider and per-chart theme merging.
• test/ — Unit tests for core math, render tests for components.

See CLAUDE.md for full architecture details.

Contributing

• Bug reports & feature requests — GitHub Issues
• Pull requests — All contributions welcome. See CLAUDE.md for development standards.
• Code style — ESLint + Prettier (auto-applied on commit).
• Tests required — All new features/bugfixes must include unit tests.

License

MIT © kirandev.in

Questions or feedback? Open an issue or start a discussion.