Showcase

Explore what's possible with chartcn's composable primitives. Each example below is built entirely from the same building blocks — Chart, marks, axes, cursors, tooltips, and legends — styled and composed to serve different real-world use cases.

Website analytics

52 weeks of traffic across four channels rendered as layered gradient areas. The tooltip breaks down each channel's share as a percentage. A reference line marks the all-time peak.

Quarterly performance

Grouped bars with a reference line marking the revenue target. The tooltip computes profit margin on the fly.

KPI dashboard

Micro sparkline charts at 48px tall with zero axes or grid — just the trend line and area fill. Each card surfaces a different metric with directional colour coding.

Infrastructure monitoring

Two synced chart panels sharing a cursor position. Scroll to zoom, drag to pan, or use the brush slider to navigate the full 90-day dataset. CPU usage renders as a filled area with an alert threshold reference line; error count displays as a bar graph below.

Investment portfolio

Four asset classes tracked over time with highlight mode — hover to focus on the nearest line while the others dim. The tooltip ranks holdings by current value and shows gain/loss from the $100 baseline.

API response times

p99 latency as a step line over a soft p50 area fill, with the SLA threshold marked and peak annotated. The tooltip badges each reading as OK or SLA breach and shows the tail penalty (p99 minus p50).