@d3charts/react

A lightweight, accessible React charting library powered by D3 math. SVG-first, with React owning the DOM and D3 handling the computations.

Install

# npm
npm install @d3charts/react

# pnpm
pnpm add @d3charts/react

# yarn
yarn add @d3charts/react

Peer dependencies: react >= 18 and react-dom >= 18.

Quick start

import { BarChart } from '@d3charts/react'

const data = [
  { month: 'Jan', sales: 30 },
  { month: 'Feb', sales: 80 },
  { month: 'Mar', sales: 45 },
  { month: 'Apr', sales: 60 },
]

function App() {
  return <BarChart data={data} keys={['sales']} categoryKey="month" width={600} height={400} />
}

Exported API

Components

| Export | Description | | ----------- | ------------------------------------------------------- | | BarChart | Grouped or stacked bar chart with auto-legend | | LineChart | Multi-series line chart with optional smooth curves | | PieChart | Pie/donut chart with configurable radius and labels | | Legend | Standalone horizontal colour legend (SVG <g> element) |

Types

| Export | Description | | ------------------ | ----------------------------------------------- | | BarChartProps<D> | Props for BarChart — generic over data shape | | LineChartProps | Props for LineChart | | PieChartProps | Props for PieChart | | DataPoint | { label: string; value: number } | | LineDataPoint | { x: number; y: number } | | LineSeries | { id: string; data: LineDataPoint[]; color? } | | Margin | { top, right, bottom, left } | | ChartDimensions | Pre-computed outer + inner dimensions |

Hooks

| Export | Description | | ------------------- | ----------------------------------------------------- | | useResizeObserver | Returns a ref and live { width, height } dimensions |

Examples

Responsive bar chart

import { useResizeObserver, BarChart } from '@d3charts/react'

function ResponsiveBarChart({ data }) {
  const [ref, dims] = useResizeObserver<HTMLDivElement>()

  return (
    <div ref={ref} style={{ width: '100%', height: 400 }}>
      {dims && (
        <BarChart
          data={data}
          keys={['sales']}
          categoryKey="month"
          width={dims.width}
          height={dims.height}
        />
      )}
    </div>
  )
}

Multi-series line chart

import { LineChart } from '@d3charts/react'
;<LineChart
  series={[
    {
      id: 'revenue',
      data: [
        { x: 0, y: 10 },
        { x: 1, y: 25 },
      ],
      color: '#4e79a7',
    },
    {
      id: 'expenses',
      data: [
        { x: 0, y: 15 },
        { x: 1, y: 12 },
      ],
      color: '#e15759',
    },
  ]}
  width={600}
  height={400}
/>

Donut chart

import { PieChart } from '@d3charts/react'
;<PieChart
  data={[
    { label: 'React', value: 40 },
    { label: 'Vue', value: 25 },
    { label: 'Svelte', value: 10 },
  ]}
  width={400}
  height={400}
  innerRadius={80}
/>

Documentation

| Document | Description | | ------------------------------------------------------ | ------------------------------------------ | | Architecture | Design philosophy, layer diagram, D3 usage | | Contributing | New-chart checklist, templates, standards | | Types | Shared interfaces and constants | | Utilities | Scale factories and tick generators | | Hooks | useResizeObserver reference | | Shared components | AxisBottom, AxisLeft, Legend |

Development

pnpm install          # install dependencies
pnpm dev              # watch mode build
pnpm test             # run tests
pnpm storybook        # launch Storybook on port 6006
pnpm build            # production build
pnpm build-storybook  # build static Storybook

License

MIT