Getting Started

Radiant Charts is a high-performance, fully-custom canvas charting library for React. It renders entirely on an HTML5 <canvas> element — no SVG, no DOM clutter — and ships 70+ chart types out of the box.

Prerequisites

Before you begin, make sure you have the following installed:

• Node.js 18+ and npm 9+
• React 18+ (peer dependency)
• A bundler that supports ES modules (Next.js, Vite, Webpack 5+)

Your First Chart

After installing (see the Installation guide), import RadiantChart and pass it an options object:

import { RadiantChart } from 'radiant-charts';

const data = [
  { month: 'Jan', revenue: 42000 },
  { month: 'Feb', revenue: 58000 },
  { month: 'Mar', revenue: 51000 },
  { month: 'Apr', revenue: 73000 },
];

export default function MyChart() {
  return (
    <RadiantChart
      options={{
        data,
        series: [{ type: 'bar', xKey: 'month', yKey: 'revenue', fill: '#6366f1' }],
        legend: { enabled: true },
      }}
      height={360}
    />
  );
}

Two APIs

Imperative API (RadiantChart)

Pass a single RadiantChartOptions object. Best for dynamic dashboards where options change frequently — the chart internally diffs the options and only re-renders what changed.

Declarative API (Chart + series children)

Compose JSX children for a more ergonomic authoring experience. Each child (<Bar>, <Line>, <XAxis>, …) renders null and registers its config with the parent <Chart> via React Context. Under the hood it assembles the same RadiantChartOptions object and renders a single canvas.

import { Chart, Bar, XAxis, YAxis, Legend } from 'radiant-charts';

<Chart data={data}>
  <XAxis dataKey="month" />
  <YAxis />
  <Legend />
  <Bar xKey="month" yKey="revenue" fill="#6366f1" />
</Chart>

Next Steps

• Installation — npm install, Next.js setup, and SSR considerations.
• Theming — light, dark, and system themes, plus custom palettes.
• Tooltips & Crosshairs — the full tooltip API.
• Browse the Chart Gallery for live interactive demos of all 70+ chart types.