Chart Region

Mark time ranges or segments with shaded vertical regions. Perfect for highlighting flight phases, operational modes, time windows, or any span of data on X-axis. Uses data coordinates so regions stay locked during streaming.

Installation

Copy and paste the following code into your project.

npx @plexusui/cli add chart-region

Manual Installation

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

2. Install dependencies:

npm install react@latest

3. Copy any required primitive components

Examples

Chart Region

Mark time ranges or segments with shaded vertical regions. Perfect for highlighting phases, modes, or time windows.

Basic Region Marking

Mark time ranges or segments with shaded vertical regions.

Phase 1

Phase 2

Flight Phases

Mark different operational phases during flight.

Pre-Flight

Takeoff & Climb

Cruise

Descent

Landing

Custom Opacity

Control region visibility with opacity settings.

Light (5%)

Medium (15%)

Heavy (25%)

API Reference

Declarative component for marking data ranges. Uses data coordinates so regions stay locked during streaming.

ChartRegion Props

Prop	Type	Default	Description
startX	number	required	Start X coordinate in data space
endX	number	required	End X coordinate in data space
label	string	undefined	Label text displayed in the region
color	string	"#3b82f6"	Region and label background color
opacity	number	0.1	Region opacity (0-1)
showLabel	boolean	true	Show or hide the label

Use Cases

Flight Phases

Mark takeoff, cruise, descent, landing phases

Operating Modes

Highlight different system operational states

Time Windows

Mark specific time periods of interest

Anomaly Ranges

Highlight periods where anomalies occurred

Loading example...