Primitives

ChartFrame

Shared figure shell for chart title, description, metrics, legend, body, and footer. Chart components compose this rather than duplicating header chrome.

Examples

Frame with metrics and legend

Visitors Showing total visitors for the last 6 weeks. Desktop 1,749 Mobile 1,351 Desktop Mobile

<ChartFrame
  title="Visitors"
  description="Showing total visitors for the last 6 weeks."
  metrics={[
    {label: 'Desktop', value: '1,749', color: 'var(--uin-chart-1)'},
    {label: 'Mobile', value: '1,351', color: 'var(--uin-chart-2)'}
  ]}
  legend={[
    {key: 'desktop', label: 'Desktop', color: 'var(--uin-chart-1)'},
    {key: 'mobile', label: 'Mobile', color: 'var(--uin-chart-2)'}
  ]}
>
  <svg>...</svg>
</ChartFrame>

Props

Prop	Type	Default	Description
`title`	`string`	`—`	Optional chart title rendered in the figure caption.
`description`	`string`	`—`	Optional supporting copy below the title.
`legend`	`ChartLegendItem[]`	`[]`	Legend items rendered in the header.
`metrics`	`ChartMetric[]`	`[]`	Header metrics for interactive chart summaries.
`footer`	`Snippet`	`—`	Optional footer slot for trend copy or notes.
`children`	`Snippet`	`—`	Chart body, usually an SVG plus optional overlay tooltip.

Install

CLI

npx @a3tai/mittsu add chart-frame --registry ./packages/charts/registry.json