Installation
Add Radiant Charts to your project in under a minute. The library ships as a single npm package with full TypeScript types and tree-shakeable ES modules.
npm / yarn / pnpm
# npm npm install radiant-charts # yarn yarn add radiant-charts # pnpm pnpm add radiant-charts
Next.js Setup
App Router (Next.js 13+)
Radiant Charts renders on <canvas> and accesses browser APIs on mount. Wrap any component that imports it with "use client", or use dynamic import to disable SSR:
// app/my-page/page.tsx ← Server Component
import dynamic from 'next/dynamic'
const MyChart = dynamic(() => import('./MyChart'), { ssr: false })
export default function Page() {
return <MyChart />
}
// app/my-page/MyChart.tsx ← Client Component
'use client'
import { RadiantChart } from 'radiant-charts'
// ...radiant-charts to the transpilePackages array in next.config.mjs when working in a monorepo workspace — this forces Next.js to compile the source directly instead of relying on the pre-built dist files, so changes to the library are picked up instantly without a separate build step.// next.config.mjs
const nextConfig = {
transpilePackages: ['radiant-charts', 'radiant-grid'],
};
export default nextConfig;Vite / CRA / Webpack
No special configuration needed. The package exports both CJS and ESM entry points and includes a .d.ts declaration file. TypeScript picks up the types automatically via the exports map in package.json.
License Setup (Pro Features)
Free tier chart types work without any key. To unlock Pro series (Radar, Treemap, Gauge, Sankey, Choropleth, and 20+ others), wrap your app in RadiantLicenseProvider:
// app/layout.tsx or _app.tsx
import { RadiantLicenseProvider } from 'radiant-charts'
export default function RootLayout({ children }) {
return (
<html>
<body>
<RadiantLicenseProvider licenseKey={process.env.NEXT_PUBLIC_RADIANT_LICENSE_KEY}>
{children}
</RadiantLicenseProvider>
</body>
</html>
)
}NEXT_PUBLIC_ only for the license key (it is a non-secret client identifier). Keep your Stripe secret keys and database credentials in server-only environment variables (no NEXT_PUBLIC_ prefix).Verify the Installation
Paste this minimal snippet into any client component. A bar chart should render with four colored bars and a legend:
'use client'
import { RadiantChart } from 'radiant-charts'
const data = [
{ q: 'Q1', v: 42 }, { q: 'Q2', v: 58 },
{ q: 'Q3', v: 51 }, { q: 'Q4', v: 73 },
]
export default function Verify() {
return (
<RadiantChart
options={{
data,
series: [{ type: 'bar', xKey: 'q', yKey: 'v', fill: '#6366f1' }],
legend: { enabled: true },
}}
height={300}
/>
)
}TypeScript
The package ships complete TypeScript definitions. Import RadiantChartOptions and the individual series option types for full intellisense:
import type { RadiantChartOptions, BarSeriesOptions } from 'radiant-charts'
const options: RadiantChartOptions = {
data: [...],
series: [{ type: 'bar', xKey: 'month', yKey: 'revenue' } satisfies BarSeriesOptions],
}