Building dashboards, reports, and analytics requires embedding data visualizations that adapt to theme, scale responsively, and integrate with the app's design system. Rolling custom SVG or reaching for a full charting library introduces maintenance burden, inconsistent theming, and bloat—or forces hacky wrapper patterns around closed-off chart instances that agents cannot read or manipulate.

Chart is a namespace exporting eight SVG-based chart components—Chart.Bar, Chart.Line, Chart.Area, Chart.Pie, Chart.Donut, Chart.StackedBar, Chart.HorizontalBar, Chart.Sparkline—that render pure data as interactive visualizations. Each accepts JSON-friendly props: simple arrays of {label, value} or {label, data} objects, optional colors, and boolean toggles for grid, axes, tooltips, legend, and animation. All charts support responsive scaling and come with interactive tooltips and legends; line and area charts add axes with auto-scaled ticks; bar variants show value labels on demand.

Import Chart from @particle-academy/react-fancy, then render the chart type with your data: <Chart.Bar data={[{label: "Q1", value: 120}, {label: "Q2", value: 200}]} />. Each component renders its own layout (legend, axes, grid) automatically based on props; all charts broadcast hover state via internal React state and expose stable data-react-fancy-chart-* attributes for agent bridging. Line and area charts accept a series array with multiple data streams, and all variants support height, className, and optional color overrides.