Radiant Chart Designer

Runtime Preview

Shows how ChartDashboard renders this layout. Widget IDs matching DEMO_DATA keys will use real data; others fall back to built-in samples.

How to use in your app

1. Use the designer above to build your dashboard layout. Click Export Layout to copy the JSON or the generated React code.
2. Save the exported JSON (e.g. as a constant or fetch it from your API).
3. Render it with ChartDashboard, passing your real data keyed by widget ID:

import ChartDashboard from '@/lib/radiant-charts/ChartDashboard';
import myLayout from './my-dashboard-layout.json';

// Keys match the IDs you set in the designer
const dataSources = {
  'revenue-bar':     revenueRows,       // [{ month, revenue }, ...]
  'enrollment-line': enrollmentRows,    // [{ year, students }, ...]
  'attendance-gauge':[{ value: 94 }],
};

<ChartDashboard
  layout={myLayout}
  dataSources={dataSources}
  theme="light"
/>

Widgets whose IDs have no matching key in dataSources automatically fall back to built-in sample data so your layout is always visible during development.