Dune Charts

Installation

Install dune-charts and add styles to your app.

Install

npm install @suveshmoza/dune-charts recharts

Peer dependencies: react, react-dom, and recharts. Use React 18+ and Recharts 3.

Import

import {
  DuneChartProvider,
  DuneAreaChart,
  DuneBarChart,
  DuneLineChart,
  DunePieChart,
  DuneRadarChart,
  DuneRadialChart,
} from '@suveshmoza/dune-charts';
import '@suveshmoza/dune-charts/styles.css';

Import the stylesheet once at your app root. That loads theme tokens (--dune-*) and chart styles.

Minimal example

  1. Wrap the tree in DuneChartProvider.
  2. Pass data (and optional config) on the chart root.
  3. Add the parts you need as children.
import { DuneChartProvider, DuneAreaChart } from '@suveshmoza/dune-charts';
import '@suveshmoza/dune-charts/styles.css';

const data = [
  { month: 'Jan', melange: 42, water: 28 },
  { month: 'Feb', melange: 48, water: 26 },
];

export function OpsChart() {
  return (
    <DuneChartProvider theme="dune">
      <DuneAreaChart data={data} fill="dither" pixel={2}>
        <DuneAreaChart.XAxis dataKey="month" />
        <DuneAreaChart.YAxis />
        <DuneAreaChart.Area dataKey="melange" />
        <DuneAreaChart.Area dataKey="water" />
      </DuneAreaChart>
    </DuneChartProvider>
  );
}

Next.js

Charts use hooks and canvas, so they must run as Client Components. Import them in a file with 'use client', or wrap your demo behind a client boundary (same pattern as these docs).

Introduction

Pixel-art charts on Recharts with dithered crest-to-depth fills and chunky cells.

Composition

Build charts from parts, not props.

On this page

InstallImportMinimal exampleNext.js