Data
A report page: one headline number, the figures that explain it, a chart of the trend and a table of the detail. Numbers stay plain; the charts carry the color.
- JS
chart.js, table.js
01 — Example
City bike-share, 2026
Sample figures. Hover or tap the chart; sort the table.
- Rides this year
- 2.1M
- Across 148 stations, January to September 2026
- Stations
- 148
- Bikes in the fleet
- 1,000
- Members
- 12.4K
- Average trip
- 14min
| Month | Classic | Electric | Cargo |
|---|---|---|---|
| Jan | 120,400 | 61,200 | 3,100 |
| Feb | 118,200 | 63,900 | 3,300 |
| Mar | 141,900 | 78,400 | 4,200 |
| Apr | 152,300 | 92,100 | 5,600 |
| May | 168,700 | 108,600 | 6,900 |
| Jun | 171,200 | 117,300 | 7,400 |
| Jul | 176,500 | 124,900 | 7,900 |
| Aug | 169,800 | 121,400 | 7,600 |
| Sep | 158,300 | 116,800 | 7,100 |
| Station | Area | Rides | Change |
|---|---|---|---|
| Courthouse Square | Downtown | 4,812 | +12% |
| RiverScape | Waterfront | 4,105 | +31% |
| Oregon District | East | 3,640 | −4% |
| University Circle | South | 3,377 | +8% |
02 — Built from
03 — Guidelines
Use it for
- Lead with the one number people came for.
- Say what each number covers: the period, the place.
- A chart for the shape of the data, a table for the exact values.
Avoid
- Color on numbers to mean good or bad. Use words: “up a third”.
- A chart for one or two numbers. Use stats.
- Dashboards where every panel shouts. One hero per page.