Chart Annotations

Minimal text annotation system for labeling chart data. Click to add, inline editing, compact design that doesn't obscure your data. Perfect for data labeling workflows in robotics, medicine, and ML training.

Installation

Copy and paste the following code into your project.

npx @plexusui/cli add chart-annotations

Manual Installation

1. Copy the component code from components/chart-annotations.tsx

2. Install dependencies:

npm install react@latest

3. Copy any required primitive components

Examples

Chart Annotations

Minimal text annotation system for labeling data. Clean, fast, stays out of the way.

Text Annotations

Click anywhere on the chart to add labels. Click to edit, drag to reposition, hover to delete.

Annotation mode enabled - Click to add labels

Streaming Data

Annotations stay locked to their data coordinates even as data streams in and the domain updates.

Paused - Click to add annotations

💡 Pause the stream, add annotations, then resume - annotations stay locked to their data points

API Reference

Single component for all annotation needs. Click to add, inline editing, minimal UI.

ChartAnnotations

Prop	Type	Default	Description
annotations	Annotation[]	required	Array of annotation objects with id, dataX, dataY, and text
onChange	(annotations: Annotation[]) => void	required	Callback when annotations are added, edited, deleted, or repositioned
enabled	boolean	true	Enable click-to-add annotation mode
color	string	"#6366f1"	Color for annotation labels and markers

Annotation Type

interface Annotation {
  id: string;
  dataX: number;      // X coordinate in data space
  dataY: number;      // Y coordinate in data space
  text: string;       // Label text
  screenX?: number;   // Optional: adjusted screen position
  screenY?: number;   // Optional: adjusted screen position
}

Features

✓ Click to Add

Click anywhere on the chart to place a new annotation

✓ Inline Editing

Type immediately after placing, click to edit later

✓ Compact Design

Small dot markers with minimal labels - doesn't obscure data

✓ Keyboard Shortcuts

Enter to save, Escape to cancel, hover to delete

Loading example...