UI Components
Line Chart

Line Chart

Multi-series line chart with GPU-accelerated rendering. Handles 100k+ data points without downsampling, making it the primary component for time-series monitoring and sensor trending.

Category: charts · Maturity: stable

Installation

npx @plexus/cli add line-chart

Usage

import { LineChart } from '@plexus/ui'
 
function TelemetryView({ data }) {
  return (
    <LineChart
      data={data}
      series={[
        { key: 'temperature', label: 'Temperature', color: '#f97316' },
        { key: 'pressure', label: 'Pressure', color: '#3b82f6' },
      ]}
      xAxis={{ label: 'Time', type: 'time' }}
      yAxis={{ label: 'Value' }}
      width={800}
      height={400}
    />
  )
}

Performance

SpecValue
Max data points100,000+
Target FPS60
Typical memory~50 MB
RendererWebGPU (WebGL2 fallback)

Aerospace Use Cases

  • Flight test monitoring — Plot altitude, airspeed, and engine parameters over time during test flights
  • Sensor trending — Track temperature, pressure, and vibration sensors across long-duration tests
  • Telemetry playback — Replay recorded session data with smooth scrolling at full resolution

Related Components