Histogram

Distribution visualization with automatic binning (Sturges, Scott, Freedman-Diaconis methods). Supports count, density, and frequency modes with optional normal curve overlay. Use cases: Data distribution analysis, quality control, experiment results, measurement statistics, tolerance analysis.

Installation

Copy and paste the following code into your project.

npx @plexusui/cli add histogram-chart

Manual Installation

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

2. Install dependencies:

npm install react@latest

3. Copy any required primitive components

Examples

Basic Histogram

Distribution analysis with automatic binning (Sturges method)

Histogram with Normal Curve Overlay

Compare distribution to theoretical normal curve

Quality Control Measurements

Distribution analysis for manufacturing tolerance (note outliers from calibration drift)

Probability Density Histogram

Display distribution as probability density (area under curve = 1)

Uniform Distribution

Random data from uniform distribution showing even spread

Bin Method Comparison

Different binning methods can reveal different aspects of the distribution

Sturges (default)

Scott (continuous)

Freedman-Diaconis (robust)

Manual (15 bins)

Loading example...