# Histogram

A histogram bins a single measure and counts what falls in each bin. It answers a question averages hide: what does the distribution actually look like?

Latency, file size and score data all have long tails that a mean will happily conceal.

---

## When this is the right chart

* Latency and performance data, which is never normally distributed.
* File sizes, scores and any measure with outliers.
* Before choosing an average, to check whether one is meaningful.

---

## What the data needs to look like

| **Field** | **Type**                             |
| --------- | ------------------------------------ |
| Value     | Quantitative: the measure to bin     |
| Bin       | Set on the encoding, not in the data |

---

## A worked example

Request latency, binned:

![Histogram](https://help.gocapable.com/images/att1431076878.svg)

The source, which you can paste into a new diagram and edit:

```
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Request latency distribution",
  "width": 380,
  "height": 220,
  "data": {"values": [
    {"ms": 42}, {"ms": 55}, {"ms": 61}, {"ms": 63}, {"ms": 70}, {"ms": 71},
    {"ms": 74}, {"ms": 78}, {"ms": 80}, {"ms": 84}, {"ms": 88}, {"ms": 91},
    {"ms": 96}, {"ms": 99}, {"ms": 104}, {"ms": 112}, {"ms": 118}, {"ms": 130},
    {"ms": 145}, {"ms": 160}, {"ms": 190}, {"ms": 240}, {"ms": 310}, {"ms": 480},
    {"ms": 620}, {"ms": 910}
  ]},
  "mark": "bar",
  "encoding": {
    "x": {"field": "ms", "type": "quantitative", "bin": {"maxbins": 20}, "title": "Latency (ms)"},
    "y": {"aggregate": "count", "title": "Requests"}
  }
}
```

---

## A few things that catch people out

* Bin width changes the story. Try two or three before settling on one.
* Histogram bars touch; bar chart bars do not. The gap means categories.
* A long tail is usually the finding. Do not truncate the axis to hide it.

---

## Related

[Heat mapIntensity across two categorical axes.](https://help.gocapable.com/diagrams/heat-map.html)

[Box plotMedian, spread and outliers, per group.](https://help.gocapable.com/diagrams/box-plot.html)

[Charts and graphsBack to the chart overview.](https://help.gocapable.com/diagrams/charts-and-graphs.html)

---

_Pick the chart for the question, not for the look._