Components
Customized
Access chart internal state to render custom SVG elements
<Customized> is a renderless component that exposes chart internal state via its #default scoped slot, letting you render arbitrary SVG elements with full access to computed chart data.
Basic usage
Render a custom annotation using chart dimensions and offset:
Access graphical items
Use formattedGraphicalItems to read registered graphical items and their data:
Slot props
| Prop | Type | Description |
|---|---|---|
formattedGraphicalItems | FormattedGraphicalItem[] | All registered graphical items with type, dataKey, and settings |
chartWidth | number | Total chart width |
chartHeight | number | Total chart height |
offset | { top, right, bottom, left } | Plot area offset (after margins and axes) |
FormattedGraphicalItem
| Field | Type | Description |
|---|---|---|
type | string | Item type ('line', 'bar', 'area', 'scatter', 'pie', 'radar', 'radialBar', 'funnel') |
dataKey | DataKey | Data key used by the item |
props | object | Full item settings (axis IDs, stack config, etc.) |