Token breakdown chartPro
Input, cached, output and reasoning tokens stacked per request or day.
On this page
ProTen days of tokens by kind as caching rolls out.
Installation
Usage
import { TokenBreakdownChart } from "@/components/ui/chatcn/pro/token-breakdown-chart"
<TokenBreakdownChart data={usage} />Cached input is its own band because it bills at a fraction of fresh input; the description states the cache share. Use layout="horizontal" for per request rows with long ids.
Examples
States
ProPer request rows, loading and empty.
Props
| Prop | Type | Notes |
|---|---|---|
data | TokenUsage[] | { label, input, cached, output, reasoning } |
layout | "vertical" | "horizontal" | Columns or rows |
loading, empty | States |
Accessibility
- Inherits the chart's legend, table view and generated summary.