Charts Blocks

An analytics card with a bar chart built on the chart component.

An analytics card with a gradient-filled area chart showing a monthly active users trend, topped by a three-KPI summary row (total, peak month, peak count) and a YoY growth badge.

Analytics area chart card with legend, hover tooltip, and a 7d/30d/90d range select that swaps the dataset

A single-series line chart card with a grid, axis, and hover tooltip showing monthly visitor trends.

A donut chart card with a centered total and a ranked legend list, breaking down traffic by source.

Pro charts: interactive net-revenue area chart with a count-up stat header, a Week/Month/Year toggle that blur-swaps and re-animates the series, a hover crosshair, and peak/trough markers.

Pro charts: a KPI health row of four tiles, each with a count-up figure, a trend badge, and a mini sparkline, plus a Week/Month/Year toggle that re-animates every sparkline and re-counts the figures.

Pro charts: a 2x2 metric card grid where each card pairs a count-up figure and trend badge with a larger gradient area sparkline, revealing an exact hover tooltip and lifting on hover.

Pro charts: a revenue donut with a count-up center total beside a ranked legend list; hovering a legend row highlights its arc and dims the rest, and the arcs draw in on scroll.

Pro charts: a single proportional horizontal meter that fills segment-by-segment above a ranked account list with real svgl marks; hovering a list row emphasizes its meter segment and dims the rest.

Pro charts: grouped comparison bars (this quarter vs last) that grow in, where hovering a category highlights its group and dims the rest, with a count-up header and delta badge.

Pro charts: a stacked revenue-composition bar chart (new, expansion, reactivation) that grows in stacked, with a legend, a per-segment hover tooltip, a count-up total, and a YoY badge.

Pro charts: a conversion funnel with a top row of stage KPIs (count-up totals and step rates) over a four-layer stacked area chart that draws in, with a hover reference line and multi-series tooltip.

Pro charts: a dual-line orders-vs-expenses chart with a toggle that switches the emphasized series (blur-swaps and re-animates) and a hover crosshair, beside a side stack of count-up KPI tiles.

Pro charts: a pipeline-analytics radar comparing this team against a benchmark across six axes, with a period select that re-animates the polygon and re-counts a legend list plus a callout note.

Pro charts: concentric radial goal rings that fill in around a count-up center total, beside metric tiles; hovering a tile emphasizes its ring and dims the rest.

Pro charts: a composed chart with faint monthly-sales bars under a smooth orders line, a count-up header, a fiscal-year select that re-animates, a hover crosshair, and a channel breakdown row.

Pro charts: a live API-traffic monitor whose series ticks a new point roughly once per second within a bounded window, with a pulsing live dot, a live current value, and peak/average/error-rate stats.