Annotations

Three composable components for adding context to charts: Chart Annotations (text labels), Chart Regions (highlighted time ranges), and Chart Rulers (measurement tools). All are stable and designed to overlay on any Plexus chart component.

Category: interactive · Maturity: stable

Installation

npx @plexus/cli add annotations

Chart Annotations

Minimal text annotations pinned to specific data points or coordinates. Use them to label events, mark thresholds, or call out anomalies.

import { ChartAnnotation } from '@plexus/ui'
 
<ChartAnnotation
  x={1700000000}
  y={85.3}
  label="Motor overheat"
  color="#ef4444"
/>

Chart Regions

Highlight time ranges on a chart. Regions span the full vertical axis and are useful for marking phases, operating windows, or flagged intervals.

import { ChartRegion } from '@plexus/ui'
 
<ChartRegion
  start={1700000000}
  end={1700003600}
  label="Thermal soak phase"
  color="rgba(59, 130, 246, 0.15)"
/>

Chart Rulers

Interactive measurement ruler that you drag across a chart to measure rate of change, delta, and duration between two points.

import { ChartRuler } from '@plexus/ui'
 
<ChartRuler
  enabled
  showDelta
  showRate
  unit="°C/min"
/>

Composing with Charts

Annotations, regions, and rulers are children of any chart component:

import { LineChart, ChartAnnotation, ChartRegion, ChartRuler } from '@plexus/ui'
 
function AnnotatedChart({ data }) {
  return (
    <LineChart data={data} width={800} height={400}>
      <ChartRegion
        start={1700000000}
        end={1700001800}
        label="Phase 1: Warm-up"
        color="rgba(34, 197, 94, 0.1)"
      />
      <ChartRegion
        start={1700001800}
        end={1700003600}
        label="Phase 2: Test"
        color="rgba(59, 130, 246, 0.1)"
      />
      <ChartAnnotation
        x={1700002500}
        y={92.1}
        label="Peak temperature"
      />
      <ChartRuler enabled showDelta showRate />
    </LineChart>
  )
}

Aerospace Use Cases

• Flight phase labeling — Mark takeoff, cruise, descent, and landing phases on time-series plots
• Anomaly annotation — Pin labels to data points where sensors exceeded limits or triggered alerts
• Rate analysis — Use the ruler to measure climb rate, temperature change rate, or deceleration between two points on a chart