UI Components
Scatter Chart

Scatter Chart

Scatter plot with variable point sizes and colors, built for correlation analysis between two or more metrics. Each point can encode additional dimensions through size and color mapping.

Category: charts · Maturity: beta

Installation

npx @plexus/cli add scatter-chart

Usage

import { ScatterChart } from '@plexus/ui'
 
function CorrelationView({ data }) {
  return (
    <ScatterChart
      data={data}
      x={{ key: 'temperature', label: 'Temperature (°C)' }}
      y={{ key: 'pressure', label: 'Pressure (hPa)' }}
      size={{ key: 'humidity', range: [2, 12] }}
      color={{ key: 'altitude', scale: 'viridis' }}
      width={800}
      height={400}
    />
  )
}

Performance

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

Aerospace Use Cases

  • Correlation analysis — Visualize relationships between temperature and pressure, vibration and RPM, or any pair of metrics
  • Quality control plots — Scatter incoming sensor readings against expected ranges to identify outliers
  • Multi-dimensional data — Encode four dimensions (x, y, size, color) in a single chart for dense data exploration

Related Components