My daily Claude Code token usage, stacked by model. Updated once a day from a local cron that reads ccusage. Totals include cache reads, which dominate, so treat the shape as relative activity rather than billed spend.
Make your own Link to heading
The prompt below builds you the same chart for your own ccusage data. Paste it into Claude Code and it reads your local usage, then produces a single self-contained HTML file you open in a browser. No server, and nothing leaves your machine.
Build me a single self-contained HTML file I can open in a browser to view a chart of my own Claude Code token usage, broken down by model.
Data source: `ccusage daily --json` (https://github.com/ryoppippi/ccusage), which I have installed locally. It outputs `{ "daily": [ { "date": "YYYY-MM-DD", "modelBreakdowns": [ { "modelName", "inputTokens", "outputTokens", "cacheCreationTokens", "cacheReadTokens" }, ... ] }, ... ] }`. Run it and embed the output directly into the HTML file (inline JS variable) so there is no server and no separate data file. I just open the file.
The chart:
- Plain HTML5 canvas, zero dependencies (no Chart.js, no CDN).
- One stacked bar per day; each segment is a model in a single consistent colour. A model's bar height = input + output + cacheCreation + cacheRead.
- Order models by class (Fable, Opus, Sonnet, Haiku, then by name within a class) and draw the top class on top of each bar; legend leads with it. Prettify model names (e.g. claude-opus-4-8 -> "Opus 4.8").
- Dark-mode aware via prefers-color-scheme (canvas colours and tooltip).
- M/B/k-formatted y-axis, sparse date labels on the x-axis, a model legend, and a hover tooltip with one line per model showing its per-category breakdown (cache read, cache create, input, output) and total, plus the day total.
- Responsive width.
After building it, open it in a browser to confirm it renders with my real data in both light and dark mode with no console errors.