Browse Components
Histogram
See how observations are distributed.
Basic
Hover, tap or focus a mark to inspect exact values. Arrow keys move between observations.
| Observation | Milliseconds |
|---|---|
| Request 1 | 82 |
| Request 2 | 94 |
| Request 3 | 102 |
| Request 4 | 108 |
| Request 5 | 115 |
| Request 6 | 117 |
| Request 7 | 123 |
| Request 8 | 126 |
| Request 9 | 128 |
| Request 10 | 132 |
| Request 11 | 135 |
| Request 12 | 137 |
| Request 13 | 139 |
| Request 14 | 141 |
| Request 15 | 144 |
| Request 16 | 146 |
| Request 17 | 150 |
| Request 18 | 153 |
| Request 19 | 158 |
| Request 20 | 161 |
| Request 21 | 167 |
| Request 22 | 174 |
| Request 23 | 182 |
| Request 24 | 199 |
View Code
<figure class="chart" data-chart="histogram">
<figcaption>
Response time distribution
</figcaption>
<div class="chart-data">
<table>
<caption>
Response time distribution — example data
</caption>
<thead>
<tr>
<th scope="col">
Observation
</th>
<th scope="col">
Milliseconds
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Request 1
</th>
<td>
82
</td>
</tr>
<tr>
<th scope="row">
Request 2
</th>
<td>
94
</td>
</tr>
<tr>
<th scope="row">
Request 3
</th>
<td>
102
</td>
</tr>
<tr>
<th scope="row">
Request 4
</th>
<td>
108
</td>
</tr>
<tr>
<th scope="row">
Request 5
</th>
<td>
115
</td>
</tr>
<tr>
<th scope="row">
Request 6
</th>
<td>
117
</td>
</tr>
<tr>
<th scope="row">
Request 7
</th>
<td>
123
</td>
</tr>
<tr>
<th scope="row">
Request 8
</th>
<td>
126
</td>
</tr>
<tr>
<th scope="row">
Request 9
</th>
<td>
128
</td>
</tr>
<tr>
<th scope="row">
Request 10
</th>
<td>
132
</td>
</tr>
<tr>
<th scope="row">
Request 11
</th>
<td>
135
</td>
</tr>
<tr>
<th scope="row">
Request 12
</th>
<td>
137
</td>
</tr>
<tr>
<th scope="row">
Request 13
</th>
<td>
139
</td>
</tr>
<tr>
<th scope="row">
Request 14
</th>
<td>
141
</td>
</tr>
<tr>
<th scope="row">
Request 15
</th>
<td>
144
</td>
</tr>
<tr>
<th scope="row">
Request 16
</th>
<td>
146
</td>
</tr>
<tr>
<th scope="row">
Request 17
</th>
<td>
150
</td>
</tr>
<tr>
<th scope="row">
Request 18
</th>
<td>
153
</td>
</tr>
<tr>
<th scope="row">
Request 19
</th>
<td>
158
</td>
</tr>
<tr>
<th scope="row">
Request 20
</th>
<td>
161
</td>
</tr>
<tr>
<th scope="row">
Request 21
</th>
<td>
167
</td>
</tr>
<tr>
<th scope="row">
Request 22
</th>
<td>
174
</td>
</tr>
<tr>
<th scope="row">
Request 23
</th>
<td>
182
</td>
</tr>
<tr>
<th scope="row">
Request 24
</th>
<td>
199
</td>
</tr>
</tbody>
</table>
</div>
</figure>Right-to-left
Labels follow the reading direction. Numeric and radial axes keep their established orientation.
| Observation | Milliseconds |
|---|---|
| Request 1 | 82 |
| Request 2 | 94 |
| Request 3 | 102 |
| Request 4 | 108 |
| Request 5 | 115 |
| Request 6 | 117 |
| Request 7 | 123 |
| Request 8 | 126 |
| Request 9 | 128 |
| Request 10 | 132 |
| Request 11 | 135 |
| Request 12 | 137 |
| Request 13 | 139 |
| Request 14 | 141 |
| Request 15 | 144 |
| Request 16 | 146 |
| Request 17 | 150 |
| Request 18 | 153 |
| Request 19 | 158 |
| Request 20 | 161 |
| Request 21 | 167 |
| Request 22 | 174 |
| Request 23 | 182 |
| Request 24 | 199 |
View Code
<figure class="chart" dir="rtl" data-chart="histogram">
<figcaption>
Response time distribution
</figcaption>
<div class="chart-data">
<table>
<caption>
Response time distribution — example data
</caption>
<thead>
<tr>
<th scope="col">
Observation
</th>
<th scope="col">
Milliseconds
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Request 1
</th>
<td>
82
</td>
</tr>
<tr>
<th scope="row">
Request 2
</th>
<td>
94
</td>
</tr>
<tr>
<th scope="row">
Request 3
</th>
<td>
102
</td>
</tr>
<tr>
<th scope="row">
Request 4
</th>
<td>
108
</td>
</tr>
<tr>
<th scope="row">
Request 5
</th>
<td>
115
</td>
</tr>
<tr>
<th scope="row">
Request 6
</th>
<td>
117
</td>
</tr>
<tr>
<th scope="row">
Request 7
</th>
<td>
123
</td>
</tr>
<tr>
<th scope="row">
Request 8
</th>
<td>
126
</td>
</tr>
<tr>
<th scope="row">
Request 9
</th>
<td>
128
</td>
</tr>
<tr>
<th scope="row">
Request 10
</th>
<td>
132
</td>
</tr>
<tr>
<th scope="row">
Request 11
</th>
<td>
135
</td>
</tr>
<tr>
<th scope="row">
Request 12
</th>
<td>
137
</td>
</tr>
<tr>
<th scope="row">
Request 13
</th>
<td>
139
</td>
</tr>
<tr>
<th scope="row">
Request 14
</th>
<td>
141
</td>
</tr>
<tr>
<th scope="row">
Request 15
</th>
<td>
144
</td>
</tr>
<tr>
<th scope="row">
Request 16
</th>
<td>
146
</td>
</tr>
<tr>
<th scope="row">
Request 17
</th>
<td>
150
</td>
</tr>
<tr>
<th scope="row">
Request 18
</th>
<td>
153
</td>
</tr>
<tr>
<th scope="row">
Request 19
</th>
<td>
158
</td>
</tr>
<tr>
<th scope="row">
Request 20
</th>
<td>
161
</td>
</tr>
<tr>
<th scope="row">
Request 21
</th>
<td>
167
</td>
</tr>
<tr>
<th scope="row">
Request 22
</th>
<td>
174
</td>
</tr>
<tr>
<th scope="row">
Request 23
</th>
<td>
182
</td>
</tr>
<tr>
<th scope="row">
Request 24
</th>
<td>
199
</td>
</tr>
</tbody>
</table>
</div>
</figure>Empty data
The chart keeps its reserved space without inventing observations.
| Observation | Milliseconds |
|---|
View Code
<figure class="chart" data-chart="histogram">
<figcaption>
Response time distribution
</figcaption>
<div class="chart-data">
<table>
<caption>
Response time distribution — example data
</caption>
<thead>
<tr>
<th scope="col">
Observation
</th>
<th scope="col">
Milliseconds
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</figure>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/chart-core.css">
<link rel="stylesheet" href="/library/assets/chart-plots.css">
<link rel="stylesheet" href="/library/assets/histogram.css">
<script defer src="/library/assets/chart-core.js"></script>
<script defer src="/library/assets/chart-plots.js"></script>
<script defer src="/library/assets/histogram.js"></script>12,194 bytes CSS including base · 16,525 bytes runtime JavaScript
Usage
Data format
One column of raw observations, up to 32 rows. Equal-width bins include the lower bound and exclude the upper bound, except the final bin which includes both. data-chart-bins sets 1–16 bins (default 8). A constant dataset gets a one-unit range centered on its value.
Shared interactions
Hover, tap or focus a mark to inspect its exact value. Arrow keys, Home and End move between marks; Escape dismisses the tooltip. The source table remains available without JavaScript. Enhanced charts expose exact values through accessible marks and tooltips.
Lifecycle and themes
Load Chart Core, Chart Plots and this component module. Theme tokens supply colors in light and dark modes. Use layoutCharts.refresh(root) after changing the table and destroy(root) before unmounting. Wide charts scroll within their frame.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.