Preview
Quality vs cost
Support agent · 1,200 evaluation prompts per model
Illustrative evaluation data
Design guidance
Use position for comparison, area for magnitude, and a shared scale for repeated views. Start bars at zero. Keep missing observations distinct from zero. Use intervals only when the estimator and population are known. Label retirement ranges as scenarios.
Chart renders a TanStack Charts definition. Each mark keeps its own typed rows. The host owns sizing, keyboard focus and theme paint. Your application owns headings, filters, persistent selection and exact-value alternatives. Native definitions compose scales, color legends, focus and tooltip behavior.
Installation
For the package entry, install @tanstack/charts@1.1.0 and @tanstack/react-charts@1.1.0. Import Chart from ghost-ui/charts, then import ghost-ui/styles.css and ghost-ui/charts.css. Advanced recipes use explicit TanStack feature subpaths at their call sites. Map and curve examples also import d3-geo@3.1.1 and d3-shape@3.2.0. UTC/log scales and numeric color ramps use d3-scale@4.0.2;TypeScript callers can add @types/d3-scale@4.0.9.
Basic usage
Memoize the complete definition when rows or semantic options change. A CSS palette change does not require a new definition. Focus and selection callbacks receive the original datum type.
Structures
Supply ariaLabel for every plot. Keep important values available in text or a table. Range editors and linked views keep one semantic state in the application. TanStack supplies point focus, keyboard navigation, structured tooltips and native brush/zoom controls. Configure inspection in the definition. Use renderTooltipBody to compose a React body from the original datum, or keep its defaultBody. Interactive actions belong in pinned content; call dismiss to close it.
Examples
The examples use real AI lab and model names with illustrative evaluation measurements. Finance examples state their assumptions. Every source view includes its caller-owned data and frame; import the accompanying example CSS. These recipes compose the same Chart host.
Lines and areas
Line
Support agent · 12 weekly runs.
Evaluation pass rate
Support agent · 12 weekly runs
Illustrative evaluation data
Multi line
Same evaluation set · 1,200 prompts per model.
Pass rate by model
Same evaluation set · 1,200 prompts per model
Illustrative evaluation data
Step
Fixed monthly payment · no new borrowing.
Debt repayment
Fixed monthly payment · no new borrowing
Illustrative evaluation data
Area
Support workspace · current week.
Daily inference spend
Support workspace · current week
Illustrative evaluation data
Range area
Illustration · $100k start, $800/mo, 4–6% annual returns.
Retirement outlook
Illustration · $100k start, $800/mo, 4–6% annual returns
Illustrative retirement scenarios · $100,000 start · $800 monthly contribution · nominal returns compounded monthly
Bars and rankings
Ranked bars
Support agent · higher is better.
Task success by model
Support agent · higher is better
Illustrative evaluation data
Columns
All models · current week.
Daily inference spend
All models · current week
Illustrative evaluation data
Grouped bars
Success rate · same six weekly evaluation runs.
Coding and reasoning
Success rate · same six weekly evaluation runs
Illustrative evaluation data
Diverging
Percentage-point change · compared with the previous prompt.
Change after prompt update
Percentage-point change · compared with the previous prompt
Illustrative evaluation data
Lollipop
Lightweight ranking · higher is better.
Task success by model
Lightweight ranking · higher is better
Illustrative evaluation data
Dumbbell
Task success · grey: before, sky: after.
Before and after fine-tuning
Task success · grey: before, sky: after
Illustrative evaluation data
Waterfall
Income, expenses and market movement · USD.
Monthly net worth change
Income, expenses and market movement · USD
Illustrative evaluation data
Relationships
Scatter
Support agent · 1,200 evaluation prompts per model.
Quality vs cost
Support agent · 1,200 evaluation prompts per model
Illustrative evaluation data
Bubble
Bubble area represents request volume.
Quality, cost and usage
Bubble area represents request volume
Illustrative evaluation data
Connected scatter
R1–R6 · ordered release path.
Model improvement over releases
R1–R6 · ordered release path
Illustrative evaluation data
Regression
30 sampled requests · fitted linear trend.
Tokens and response time
30 sampled requests · fitted linear trend
Illustrative evaluation data
Distributions
Histogram
1,200 requests · fixed 200ms bins.
Response-time distribution
1,200 requests · fixed 200ms bins
Illustrative evaluation data
Boxplot
Median, quartiles, whiskers and outliers.
Latency by model
Median, quartiles, whiskers and outliers
Illustrative evaluation data
Violin
Identical density bandwidth across models.
Response-time density
Identical density bandwidth across models
Illustrative evaluation data
Ecdf
Share of observations at or below each response time.
Requests within latency target
Share of observations at or below each response time
Illustrative evaluation data
Beeswarm
Each point is a sampled request.
Individual response times
Every 12th request · each point retains its measured latency
Illustrative evaluation data
Ridgeline
Same response-time bins across models.
Response-time profiles
Same response-time bins across models
Illustrative evaluation data
Heatmaps and density
Heatmap
Task success by model · shared 0–100% scale.
Benchmark results
Task success by model · shared 0–100% scale
Illustrative evaluation data
Calendar heatmap
Requests per day · July–14 October 2026.
Daily inference activity
Requests per day · July–14 October 2026
Illustrative evaluation data
Hexbin
Binned request concentration.
Latency and output size
Binned request concentration
Illustrative evaluation data
Contour
Density estimate · same bandwidth.
Latency concentration
Density estimate · same bandwidth
Illustrative evaluation data
Intervals and financial data
Error bars
Task success · 95% Wilson intervals, n=1,200.
Score with uncertainty
Task success · 95% Wilson intervals, n=1,200
Illustrative evaluation data
Interval
One scheduled run · time in UTC.
Evaluation job durations
One scheduled run · time in UTC
Illustrative evaluation data
Candlestick
Open, high, low and close · fictional index fund.
Fund price this month
Open, high, low and close · fictional index fund
Illustrative evaluation data
Composition
Stacked bars
Total daily spend · three model contributions.
Inference cost by model
Total daily spend · three model contributions
Illustrative evaluation data
Stacked area
Requests over time · three model contributions.
Usage by model
Requests over time · three model contributions
Illustrative evaluation data
Normalized
Daily share · raw totals remain available.
Traffic mix
Daily share · raw totals remain available
Illustrative evaluation data
Streamgraph
Relative profile across weeks · displaced baseline.
Topic demand
Relative profile across weeks · wiggle-displaced baseline
Illustrative evaluation data
Funnel
Support agent · 1,200 tasks.
Agent task completion
Support agent · 1,200 tasks
Illustrative evaluation data
Mosaic
1,200 tasks · volume and outcome share.
Outcome by task
1,200 tasks · volume and outcome share
Illustrative evaluation data
Facets and linked views
Facets
Weekly agent evaluations · same prompt set.
Success by task
Weekly agent evaluations · same prompt set
Illustrative evaluation data
Linked views
Selected requests
9 of 28 requests selected · support agent
Illustrative evaluation data
Networks and hierarchies
Sankey
Fast and reasoning routes · conserved request totals.
Request routing
Fast and reasoning routes · conserved request totals
1,200 requests · 800 fast / 400 reasoning
Illustrative evaluation data
Tree
Parent and child tasks.
Agent dependencies
Parent and child tasks
Illustrative evaluation data
Network
Connections between agent tools · bounded graph.
Tool handoffs
Connections between agent tools · bounded graph
Illustrative evaluation data
Treemap
Area encodes spend · USD.
Cost by workspace
Area encodes spend · USD
Workspace spend · USD · zero-value rows have no area
Sunburst
Workspace and model shares.
Cost hierarchy
Workspace and model shares
Current month · $12,480 total · costs by workspace and model
Maps and spatial data
Choropleth
Shared color scale · missing regions are distinct from zero.
Regional request volume
Shared color scale · missing regions are distinct from zero
Regional requests · 0–100k · unmeasured regions shown in neutral · Natural Earth / world-atlas 2.0.2
Bubble map
Bubble area encodes median response time.
Provider latency
Bubble area encodes median response time
Median response latency · circle area grows with milliseconds · Natural Earth / world-atlas 2.0.2
Flow map
Source and destination regions.
Cross-region routing
Source and destination regions
1,200 requests routed between regions · route width tracks requests · great-circle paths · Natural Earth / world-atlas 2.0.2
Polar and radar
Donut
Model share · current month.
Inference spend
Model share · current month
Current month · USD · five model totals sum to $12,480
Pie
Three outcomes · current evaluation set.
Task outcomes
Three outcomes · current evaluation set
1,200 evaluation tasks · resolved, escalated or failed
Radar
All five axes use the same 0–100 score scale.
Model capability profile
All five axes use the same 0–100 score scale
Illustrative evaluation data
Radial bars
Three independent budget limits.
Daily budget use
Three independent budget limits
Each model uses its own daily USD limit
Gauge
72% of the workspace limit.
Monthly budget used
72% of the workspace limit
$18,000 used of a $25,000 workspace limit
Rose
Sector area encodes requests · UTC.
Requests by hour
Sector area encodes requests · UTC
Hourly support agent requests · UTC · sector area represents request count
Polar line
Cyclic 24-hour comparison · UTC.
Latency by time of day
Cyclic 24-hour comparison · UTC
Median response latency by hour · UTC · 24:00 repeats 00:00 to close the cycle
Annotations
Annotation
Weekly task success · target and prompt-update event.
Success after prompt update
Weekly task success · target and prompt-update event
Illustrative evaluation data
Native inspection and composition
Native definitions own focus,placement,pinning and color guides. The React body keeps the original datum and caller actions. SVG/PNG actions export the current plot. A mixed Canvas/SVG root supports raster export.
Tooltip Point
Inspect one measured model result.
Model evaluation
Support agent · June 2026
Illustrative evaluation data
Tooltip Grouped
Compare models at one evaluation date.
Evaluation pass rate
Support agent · June 2026
Illustrative evaluation data
Tooltip Rich
Inspect lab/version and commit a model comparison.
Model shortlist
Support agent · June 2026
Illustrative evaluation data
Tooltip Portal
Read a result outside a clipped analytics panel.
Evaluation results
Support agent · June 2026
Illustrative evaluation data
Legend Categorical
Identify stable lab colors after filtering/reorder.
Latency by lab
Support agent · June 2026
Illustrative evaluation data
Legend Continuous
Read the same task-success intensity scale.
Task success by model
Support agent · June 2026
Illustrative evaluation data
Legend Threshold
Read latency thresholds including exact boundaries.
Response time
Support agent · June 2026
Illustrative evaluation data
Legend Interactive
Compare only the active model series.
Evaluation pass rate
Support agent · June 2026
Illustrative evaluation data
Legend Size
Read request volume encoded as bubble area.
Quality and request volume
Support agent · June 2026
Illustrative evaluation data
Cursor Shared
Inspect success and spend at the same date.
Success and spend
Support agent · June 2026
Illustrative evaluation data
Cursor Continuous
Inspect a semantic unsnapped time position.
Evaluation timeline
Support agent · June 2026
Jun 20 · 12:00 UTC
Illustrative evaluation data
Focus Group Y
Compare model outcomes by task category.
Task performance
Support agent · June 2026
Illustrative evaluation data
Focus Radial
Compare model task profiles at one angle.
Task profile
Support agent · June 2026
Illustrative evaluation data
Selection Keyed
Keep a selected model across score updates.
Model shortlist
Support agent · June 2026
GPT-5.4 mini
Illustrative evaluation data
Scale Time
Show actual elapsed time between evaluations.
Daily evaluations
Support agent · June 2026
Illustrative evaluation data
Scale Log
Compare positive response-time magnitudes across models.
Response time
Support agent · June 2026
Illustrative evaluation data
Renderer Hybrid
Inspect a dense request cloud with clear SVG axes.
Request latency
Support agent · June 2026
Illustrative evaluation data
Motion Update
Track model rank changes after an evaluation.
Model ranking
Support agent · June 2026
Illustrative evaluation data
Export Chart
Download the current evaluation view.
Evaluation pass rate
Support agent · June 2026
Illustrative evaluation data
Interaction
Shared tooltip
Support agent · evaluation results.
Evaluation pass rate
Support agent · evaluation results
Illustrative evaluation data
Keyboard focus
Support agent · evaluation results.
Evaluation pass rate
Support agent · evaluation results
12 weekly evaluation runs
Illustrative evaluation data
Point selection
Support agent · evaluation results.
Quality vs cost
Support agent · evaluation results
GPT-5.4 mini · Task success 87.1% · Cost / 1k $3.20
Illustrative evaluation data
Range brush
Support agent · evaluation results.
Evaluation pass rate
Support agent · evaluation results
Illustrative evaluation data
Zoomed range
Support agent · evaluation results.
Evaluation pass rate
Support agent · evaluation results
Illustrative evaluation data
Streaming update
Evaluation in progress · 846 of 1,200 prompts scored.
Evaluation pass rate
Evaluation in progress · 846 of 1,200 prompts scored
Illustrative benchmark data · last update just now
Series visibility
Support agent · evaluation results.
Evaluation pass rate
Support agent · evaluation results
Illustrative evaluation data
Themes
Dark theme
Support agent · evaluation results.
Quality vs cost
Support agent · evaluation results
Illustrative evaluation data
Monochrome theme
Support agent · evaluation results.
Quality vs cost
Support agent · evaluation results
Illustrative evaluation data
Custom theme
Support agent · evaluation results.
Quality vs cost
Support agent · evaluation results
Illustrative evaluation data
Data and layout states
Loading
Support agent · evaluation results.
Evaluation pass rate
Support agent · evaluation results
Illustrative evaluation data
Empty
Support agent · evaluation results.
Evaluation pass rate
Support agent · evaluation results
Illustrative evaluation data
Invalid
Support agent · evaluation results.
Evaluation pass rate
Support agent · evaluation results
Illustrative evaluation data
Missing
Support agent · evaluation results.
Evaluation pass rate
Support agent · evaluation results
Illustrative benchmark data · Weeks 6–7 were not evaluated
Single point
Support agent · one completed evaluation run.
Evaluation pass rate
Support agent · one completed evaluation run
Illustrative evaluation data
Narrow
Support agent · evaluation results.
Task success by model
Support agent · evaluation results
Illustrative evaluation data
Data table
Support agent · evaluation results.
Quality vs cost
Support agent · evaluation results
| Model | Task success | Cost / 1k |
|---|---|---|
| GPT-5.4 | 90.6% | $12.40 |
| Claude Sonnet 4.6 | 88.4% | $6.90 |
| GPT-5.4 mini | 87.1% | $3.20 |
| Claude Haiku 4.5 | 84.2% | $1.40 |
| Gemini 3.5 Flash | 81.5% | $2.40 |
| Gemini 3.1 Flash-Lite | 78.9% | $0.60 |
Illustrative evaluation data
Inspection and rendering states
Tooltip Keyboard
Inspect and dismiss the same datum with keyboard.
Model evaluation
Support agent · June 2026
Illustrative evaluation data
Tooltip Dark
Read a pinned result in dark analytics UI.
Model shortlist
Support agent · June 2026
Illustrative evaluation data
Tooltip Narrow
Read full model versions and values on a narrow panel.
Model evaluation
Support agent · June 2026
Illustrative evaluation data
Tooltip Nullable
Distinguish zero,missing metadata and valid values.
Model evaluation
Support agent · June 2026
Illustrative evaluation data
Tooltip Dismissed
Return from pinned detail to its chart.
Model shortlist
Support agent · June 2026
Illustrative evaluation data
Motion Reduced
Read the updated result with reduced motion.
Model ranking
Support agent · June 2026
Illustrative evaluation data
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
definition | DomChartDefinition<TDatum, TX, TY> | Required. Typed marks, data channels, scales, guides and interaction configuration. | |
ariaLabel | string | Required accessible name. | |
ariaDescription | string | Optional chart description. | |
height / aspectRatio | number | Height defaults to 320 only when both are absent. Explicit aspectRatio uses responsive height. | |
width / initialWidth | number | Optional fixed width. initialWidth defaults to 640 for the first render and SSR. | |
className / style | string / CSSProperties | Host styling. Override --ts-chart-1 through --ts-chart-6 inline, or use inherited --chart-1 through --chart-6. | |
tabIndex | number | Native host tab index; upstream defaults to 0 when keyboard behavior is enabled. | |
idPrefix | string | Optional SVG resource prefix. | |
onFocusChange | (point: ChartPoint<TDatum, TX, TY> | null) => void | Receives the focused original datum or null. | |
onFocusGroupChange | (points: readonly ChartPoint<TDatum, TX, TY>[]) => void | Receives the semantic focus group. | |
onSelect | (point: ChartPoint<TDatum, TX, TY> | null) => void | Point activation. The application owns persistent selection and its result. | |
onRender | (context: ChartRenderContext<TDatum, TX, TY>) => void | SVG-host callback. Receives the resolved scene,container and SVG element. Use onRendererRender when a renderer is supplied. | |
renderSvg / measureText | ChartSvgRenderer / ChartTextMeasurer | Optional upstream renderer and text measurement hooks. Their generic types are preserved. | |
renderTooltipBody | (context: ChartTooltipBodyRenderContext<TDatum, TX, TY>) => ReactNode | Optional native body composition. Receives points,primaryPoint,content,defaultBody,pinned and dismiss. Null/false omit the React body;zero remains valid content. | |
renderer | ChartRenderer<TDatum, TX, TY> | Optional passed native renderer. Import Canvas or motion at its call site. Incompatible with renderSvg and onRender. | |
onRendererRender | (context: ChartRendererRenderContext<TDatum, TX, TY>) => void | Custom-renderer callback. Receives container,scene,surface and interaction. The context does not promise an SVG element. |
ChartProps<TDatum, TX, TY> preserves original datum and axis types across the SVG and optional renderer hosts. The component adds no business variants or data schema. See the released host API for renderer callback types.