Overview
Histogram displays the frequency distribution of continuous data across bins. Supports optional mean and median markers for statistical analysis. Built on Recharts.
Features
- Automatic bin calculation
- Configurable number of bins
- Optional mean reference line
- Optional median reference line
- Axis labels
- Interactive tooltips with bin ranges
Examples
Basic Histogram
Response time distribution
With Mean and Median
Test score distribution with statistics
Mean: 81.17Median: 81.50
Age Distribution
Participant age distribution
Mean: 36.10
Bin Count Comparison
Same data with different bin counts
5 bins
15 bins
With ChartCard
Wrapped in ChartCard
Response Time Analysis
Distribution of API response times
Mean: 3.84Median: 3.65
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | required | Array of numeric values |
bins | number | 10 | Number of bins to create |
showMean | boolean | false | Show mean reference line |
showMedian | boolean | false | Show median reference line |
xAxisLabel | string | - | X-axis label |
yAxisLabel | string | - | Y-axis label |
color | string | primary | Bar color |
Usage
import { Histogram, ChartCard } from '@/ui/components/charts';
// Basic histogram
<ChartCard title="Response Time Distribution">
<Histogram
data={[1.2, 2.5, 3.1, 3.4, 3.8, 4.2, 4.5, 5.1, 5.8, 6.2]}
bins={10}
xAxisLabel="Response Time (seconds)"
/>
</ChartCard>
// With mean and median markers
<Histogram
data={[...]}
bins={15}
showMean
showMedian
xAxisLabel="Score"
/>