Custom
The compositions cover the common shapes, but an agent isn't limited to them. Inside a component it can hand-roll raw SVG or canvas, or pull a vetted library (d3, Chart.js, topojson) from an allowed CDN in the harness - for anything bespoke the library doesn't ship: waterfalls, maps, gauges, network diagrams. Wrap the custom drawing in a Card so it still reads native to the chat surface, and cite it like any other figure.
Example
The heatmap below is hand-built from a CSS grid, each cell painted with the design-system chart token at an opacity scaled to its value - a shape the chart compositions don't offer. No chart library involved.
North America still leads, but APAC is compounding the fastest:
More custom visuals
Each of these is a self-contained component - no chart library, just SVG or CSS painted with the design-system tokens. They show the range an agent can reach for when nothing in the set fits.
Donut - revenue mix (SVG arc math)
Waterfall - revenue bridge (SVG bars + connectors)
Bullet - actual vs. plan (CSS bars + target ticks)
Staying on-brand
Custom code is free to draw anything, but it should still speak the design system:
- Paint with the chart tokens -
rgb(var(--chart-1))…rgb(var(--chart-5))for series, semantic text/border tokens for everything else. Never hardcode hex. - Sit in the house chrome - wrap the drawing in a
Card(orInlineRootfor a full component) so spacing and separation match the compositions. - Stay accessible - SVG carries
role="img"and anaria-label; canvas needs a text fallback. - Cite sourced figures - render
<Cite>next to any number that came from a tool result, exactly as in the compositions.
Agent context
When a chart composition doesn't fit, hand-roll the visual: raw SVG for bespoke charts and diagrams, canvas for pixel work, or a CDN library (d3 + topojson for maps, Chart.js for dense series) in the harness. Paint with the --chart-N tokens, wrap it in a Card, give SVG a role="img" + aria-label, and cite sourced figures with <Cite>.