Chart Ruler

Interactive measurement tool for calculating distances and deltas between points. Click and drag to measure ΔX, ΔY, and Euclidean distance. Perfect for analyzing rates of change, time differences, or amplitude changes in telemetry data.

Installation

Copy and paste the following code into your project.

npx @plexusui/cli add chart-ruler

Manual Installation

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

2. Install dependencies:

npm install react@latest

3. Copy any required primitive components

Examples

Chart Ruler

Interactive measurement tool for calculating distances and deltas between points. Perfect for analyzing rates of change and time differences.

Basic Measurement

Click and drag to measure distances between points. Shows ΔX, ΔY, and Euclidean distance.

Ruler disabled

Rate of Change Calculation

Use ruler measurements to calculate rates like velocity, acceleration, or slope.

Click and drag to calculate the rate of change (slope)

Multiple Measurements

Collect and compare multiple measurements for detailed analysis.

0 measurements recorded

API Reference

Interactive component for measuring distances. Click and drag to measure, release to capture.

ChartRuler Props

Prop	Type	Default	Description
onMeasure	(measurement: Measurement) => void	undefined	Callback when measurement is complete (mouse up)
color	string	"#f59e0b"	Color for measurement line and markers
enabled	boolean	true	Enable or disable ruler mode

Measurement Type

interface Measurement {
  startX: number;    // Start point X in data coords
  startY: number;    // Start point Y in data coords
  endX: number;      // End point X in data coords
  endY: number;      // End point Y in data coords
  deltaX: number;    // X difference (endX - startX)
  deltaY: number;    // Y difference (endY - startY)
  distance: number;  // Euclidean distance
}

Use Cases

Time Differences

Calculate time between events or phases

Amplitude Changes

Measure signal amplitude or value differences

Rate of Change

Calculate velocity, acceleration, or slope

Data Analysis

Collect measurements for detailed analysis

Loading example...