UI Components
Histogram

Histogram

Histogram with automatic binning algorithms. Analyzes the distribution of a single metric by grouping values into bins and displaying their frequency.

Category: charts · Maturity: stable

Installation

npx @plexus/cli add histogram-chart

Usage

import { HistogramChart } from '@plexus/ui'
 
function DistributionView({ values }) {
  return (
    <HistogramChart
      data={values}
      binMethod="freedman-diaconis"
      color="#3b82f6"
      xAxis={{ label: 'Temperature (°C)' }}
      yAxis={{ label: 'Frequency' }}
      width={800}
      height={400}
    />
  )
}

Binning Algorithms

AlgorithmDescription
sturgesDefault. Uses ceil(log2(n) + 1) bins. Good for roughly normal data.
scottBin width = 3.5 * std / n^(1/3). Optimal for normally distributed data.
freedman-diaconisBin width = 2 * IQR / n^(1/3). Robust to outliers.
fixedSpecify an exact number of bins with the bins prop.

Performance

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

Aerospace Use Cases

  • Sensor distribution analysis — Examine the spread of temperature, pressure, or vibration readings across a test session
  • Quality control — Verify that manufactured components fall within tolerance bands
  • Anomaly detection — Identify bimodal or skewed distributions that indicate sensor drift or failure modes

Related Components

HeatmapRadar Chart