The widget annotation type places arbitrary React content at data coordinates. Use it for alert icons, comment threads, action buttons, or any interactive element that lives in the data spacerather than in a sidebar or toolbar.
By default, a widget renders an ℹ️ info emoji. Pass acontent prop with any React element to customize it. Widgets support dx/dy offsets and work across all chart types.
JSX
// Widget annotation — place any React element at a data point { type: "widget", x: 4, // data coordinate (or use pointId) y: 32, dx: 0, // pixel offset from data point dy: -20, width: 32, // widget dimensions height: 32, content: <MyAlertButton onClick={openThread} />, // any React element } // Default (no content prop): renders ℹ️ emoji
Line Chart
An alert on the spike at month 4 opens a comment thread discussing the anomalous revenue.
JSX
<LineChart data={revenueData} xAccessor="month" yAccessor="revenue" showPoints annotations={[ { type: "widget", month: 4, // x-coordinate in data space revenue: 32, // y-coordinate in data space dy: -24, content: <AlertWidget label="Month 4 spike" />, }, ]} />
Bar Chart
A warning on the underperforming South region.
Sankey Diagram
Widget annotations on network charts anchor to nodes bynodeId. The widget tracks the node's rendered position.
Orbit Diagram
Widget annotations on OrbitDiagram anchor to nodes by nodeId. They track the node as it orbits.
JSX
<OrbitDiagram data={systemTopology} childrenAccessor="children" nodeIdAccessor="name" colorByDepth showLabels annotations={[ { type: "widget", nodeId: "Pipeline", // anchors to this node dy: -20, // offset above the node content: <AlertWidget label="Pipeline latency alert" />, }, ]} />
A widget is any React component. The annotation positions it at data coordinates — you control what it renders and how it behaves.
JSX
// Alert button that opens a comment thread function AlertWidget({ label, emoji = "⚠️" }) { const [open, setOpen] = useState(false) return ( <div style={{ position: "relative" }}> <button onClick={() => setOpen(!open)} style={{ background: "none", border: "none", cursor: "pointer", fontSize: 18 }} title={label}> {emoji} </button> {open && <CommentThread label={label} onClose={() => setOpen(false)} />} </div> ) } // Use it in any chart's annotations array: annotations={[ { type: "widget", x: dataPoint.x, y: dataPoint.y, content: <AlertWidget label="Investigate this point" />, }, ]}
Patterns
- Alerts — place warning/error icons on anomalous data points. Click to open investigation context.
- Comments — anchor discussion threads to specific data coordinates. Persist via your backend; the widget is just the UI anchor.
- Actions — deploy buttons that trigger workflows (acknowledge alert, create ticket, share snapshot) directly from the data point.
- Live feeds — embed mini status indicators (sparklines, traffic lights) at key nodes in a network diagram.