Radiant Chart Designer

Drag charts from the palette onto the canvas. Set widget IDs to bind real data at runtime.

Loading 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.

0 widgets
Add charts in the designer above to see the runtime preview here.

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.