Implementation notes
- Run D3 logic inside `onMount` to avoid SSR issues.
- Observe container size with `ResizeObserver` for responsive redraws.
- Use CSS variables to keep charts aligned with the theme.
D3 chart
Render a responsive area + line chart with D3, themed to match the Svelteground shell and safe for SSR.
Preview
Responsive chart with grid + highlight.
The SVG updates on resize, reuses theme tokens, and keeps D3 work client-only.
Data checklist
- Normalize values before mapping to the y-scale.
- Pad your domain so the line never touches edges.
- Highlight the latest point for quick scanning.
Next step
Swap in real metrics.
Connect the chart to analytics or Supabase data, and add tooltips for deeper reads.