High‑Performance
Charts & Data Grids
for React
Render tens of thousands of data points without breaking a sweat. Leverage our pure HTML5 Canvas charting engine and the extreme-performance virtualized Radiant Grid. Designed for massive scale.
Basic Demo
A minimal grid with rows and columns — no extra features enabled.
Why Radiant Charts
Everything you need to ship great data UIs
One library. No D3. No SVG wrestling. Just a clean React API over a blazing-fast HTML5 Canvas engine.
55+ Chart Types
From bar charts to chord diagrams, violin plots to choropleth maps — all rendered on the same unified Canvas engine.
Canvas Performance
Render 10 000+ data points at 60 fps — impossible with SVG-based charting libraries.
Dashboard Designer
The only React charting library with a built-in drag-and-drop dashboard builder. Ship analytics UIs in hours, not weeks.
TypeScript First
Every option, key, and series type is fully typed. Autocomplete your entire chart config — no docs tab required.
const options: RadiantChartOptions = {
data: myData,
series: [{
type: 'bar', // ← autocompleted from 55 types
xKey: 'month', yKey: 'revenue',
}],
}Fully Responsive
Wrap any chart with ResponsiveContainer and it reflows perfectly on any screen — mobile, tablet, or ultrawide.
Light & Dark Themes
Pass theme="dark" and the chart background, axes, and tooltips adapt instantly.
Developer Experience
Zero boilerplate.
Just data.
D3.js requires hundreds of lines for a single chart. Radiant Charts takes a plain data array and one options object — that's it. The engine handles scales, axes, animations, tooltips, and responsiveness automatically.
- No D3.js — no steep learning curve
- One options object drives every chart type
- Swap chart types by changing one string
- Animations, tooltips, and crosshairs built in
- Works in Next.js, Vite, CRA, and Remix
import RadiantChart from 'radiant-charts'
// ← plain JS objects, no schema
const data = [
{ month: 'Jan', revenue: 142_000 },
{ month: 'Feb', revenue: 168_000 },
// ...
]
export default function Dashboard() {
return (
<RadiantChart
options={{
data,
series: [{
type: 'bar',
xKey: 'month',
yKey: 'revenue',
}],
}}
/>
)
}Why Radiant
Engineered for Performance
Most charting libraries were built for the SVG era. Radiant Charts was built for real-time, data-dense, modern products.
| ★ RecommendedRadiant ChartsThis library | SVG LibrariesRecharts, Apex | Legacy EnterpriseHighcharts, FusionCharts | |
|---|---|---|---|
| Rendering Engine | ✓Canvas 2D | –SVG | –SVG / Canvas |
| Data Limit | ✓50,000+ pts | ✕~3,000 pts | –~10,000 pts |
| React API | ✓Native JSX | ✓Native JSX | ✕Wrapper / Config |
| Visual Designer | ✓Included | ✕None | ✕None |
| Starting Price | ✓$249 / yr | –Free | ✕$1,000+ / yr |
Live Benchmark
SVG libraries freeze the DOM at 5,000 points.
Radiant stays at 60 fps with 50,000.
60fps
at 50k pts
< 16ms
frame budget