Connecting Real Data

Wiring any chart to a real source: fetch in an effect, SWR or React Query, server components, and streaming — with every outcome mapped onto a status.

fetch in an effect — all four outcomes

SWR / React Query — one status expression

Streaming — seed, append, bound the window

Manual installation

Prefer to copy by hand? Open the Code tab on any example above and switch to the file you need — every source file is there, not just the demo. Drop them in your project like this:

• chart-engine.tsx→components/spectrumui/charts/chart-engine.tsx
• market-chart.tsx→components/spectrumui/charts/market-chart.tsx
• chart-data.tsx→components/spectrumui/charts/chart-data.tsx

There is nothing to install — this chart draws its own SVG and imports only @/lib/utils.

Usage

import { useChartData } from '@/components/spectrumui/charts/chart-data';

const { data, status, retry } = useChartData<Point[]>('/api/metrics');

• Every chart takes the same status union, so one fetch hook drives all of them.
• retry is wired to the error state's button — pass it straight through as onRetry.