---
title: "Charts span the column, like a dashboard: before and after"
---

Charts in a report now fill the column with slim bars, numbers past each bar, and quiet 11px axes, as on slopalytics and nuxt-evals.

Steps: build the data-report skill's chart gallery with its `build.mjs`, open it at 1440×900 in dark mode, and scroll to each chart.

::compare{title="A trend over time"}
:::screenshot{src="https://drop.vitehub.dev/f/2aaaef68-b49b-46d6-9e5a-011709441551.png" alt="Time to first reply, drawn 520px wide in an 832px column" viewport="1440x900"}
::::annotation{x=0 y=13.1 w=62.7 h=66.9 color="red"}
Stops at 520px; the rest of the column stays empty.
::::
:::

:::screenshot{src="https://drop.vitehub.dev/f/630ce684-01d2-49eb-a093-313a6fa96480.png" alt="Time to first reply, spanning the column" viewport="1440x900"}
::::annotation{x=0 y=13.1 w=100 h=82.1 color="green"}
Spans the column, so the slopes read.
::::
:::
::

::compare{title="How many, per name"}
:::screenshot{src="https://drop.vitehub.dev/f/047e5b23-7e02-49eb-aaa8-59bb72194d86.png" alt="Questions per type, with each number in white inside its bar" viewport="1440x900"}
::::annotation{x=58 y=28.5 w=2.9 h=9.5 color="red"}
88 sits inside its bar.
::::
:::

:::screenshot{src="https://drop.vitehub.dev/f/5cbdf41d-4759-4227-a836-32ad941ed5e4.png" alt="Questions per type, with each number past its bar's end" viewport="1440x900"}
::::annotation{x=93.9 y=29 w=2.9 h=9.5 color="green"}
88 sits past the bar's end.
::::
:::
::

::compare{title="Volume over time, by part"}
:::screenshot{src="https://drop.vitehub.dev/f/ac247b50-4802-4e1a-b7c3-7e9d862eb25c.png" alt="Questions per month, by type, as 66px-wide stacked bars" viewport="1440x900"}
::::annotation{x=43.7 y=25.7 w=7.9 h=49.5 color="red"}
Aug is a 66px slab.
::::
:::

:::screenshot{src="https://drop.vitehub.dev/f/52dc57eb-85c4-45cb-ba18-eb91e59c97b5.png" alt="Questions per month, by type, as slim stacked bars across the column" viewport="1440x900"}
::::annotation{x=81.2 y=30.9 w=5.4 h=58.8 color="green"}
Aug is a slim bar.
::::
:::
::

## The references

::screenshot{src="https://drop.vitehub.dev/f/11dce0c2-4fda-4b06-8612-dac961c4a5aa.png" alt="slopalytics.com Tokens per task: slim bars across the page, numbers over each bar" viewport="1440x900"}
::

::screenshot{src="https://drop.vitehub.dev/f/4848093d-330d-44a6-8f71-7d92b94c7f89.png" alt="nuxt-evals.onmax.me Score vs cost: a full-width plot with dotted grid lines and names at the right" viewport="1440x900"}
::