Every chart. Every variant. Live.

One series of monthly sign-ups on a category axis.

Two temperature lines with value labels and markers.

Two years of daily traffic with x zoom, toolbar and a gradient area under the line.

Share price with a target line, a highlighted range and point callouts.

Three stacked charts in one group share crosshair and tooltip.

A detail chart driven by a brush selection on an overview chart.

Price tiers that change in steps.

A line whose stroke runs through a colour gradient.

Sensor readings with gaps (null) that break the line.

Actual, plan and forecast lines with different dash patterns.

A line that appends a point every second and slides.

50 000 points drawn with peak-preserving decimation.

Release markers on a line; hovering or focusing a marker shows what shipped (annotation wcc.tooltip).

Click a year to drill into its months; the breadcrumb or Backspace goes back.

Weekly downloads as a smooth filled area.

Two overlapping smooth areas.

A datetime area with range buttons (1M / 6M / 1Y / All).

Net cash flow that crosses zero, filled to the zero line.

A compact activity area with a brush overview, in the style of a code-host contributions graph.

Three stacked channels over time.

Areas with null gaps.

Three series sampled at different, uneven timestamps.

Three products per quarter as grouped columns.

Monthly conversion rate with labels on top of each column.

Support tickets by severity, stacked with totals.

Device share per month, normalised to 100%.

Long category names rotated to fit.

Monthly profit and loss, coloured by sign.

Click a year column to load its quarters into a second chart.

One colour per column, legend hidden.

Floating min–max columns of daily temperatures.

Budget and actual stacks side by side per quarter.

Actual columns with a target marker on each.

Months grouped under year labels on the x axis.

Click a region to see its countries, then a country to see its cities.

Weeks drill into hours; the hourly level is a zoomable time series.

Drilling loads the next level asynchronously; a loading bar shows while it arrives.

Ranked horizontal bars.

Two years side by side per team.

Time spent per activity, stacked per person.

Survey answers per question as shares.

Two-sided bars around zero with absolute labels.

Bars growing from the right with the axis reversed.

Category names written inside the bars, axis labels hidden.

Stacked bars filled with line and dot patterns (print-friendly).

Bars filled with generated texture images (our own SVG tiles).

Horizontal bars with target ticks.

Two stacked groups per category, horizontal.

Cities re-rank month by month with a ticker.

Studios without a figure for a month drop out of the race (nulls 'hide') instead of showing a dash.

Revenue columns with a margin line on a second axis.

Three measures with three coloured y axes.

Two axes with different scales whose zero lines coincide (yaxis wcc.alignZero).

Euro and US-dollar axes with compact currency labels.

An area of capacity with a line of demand.

Three series types combined.

Daily low–high temperature band.

Confidence band plus median line and a dashed forecast.

Listening hours by genre over two years.

Share of total (0–100%) instead of absolute values.

Twelve product lines in one stream.

Symmetric (silhouette) stream of topics in a community thread, with labelled bands and a story note.

The same stream with order 'inside-out' (default), 'inverse' and 'none' (data order).

Opening to closing cash with subtotals.

A horizontal bridge with long step names.

Twelve monthly steps in euros plus a total.

Engagement score in 2024 and 2026 per department.

Start and current salary per level, vertical.

Minimum, target and actual per region.

Project phases on a date axis.

Several people per row, coloured by role (rangeBarGroupRows).

Planned and actual bars per task.

Overlapping bars with data labels showing durations.

Each bar picks its own colour (fillColor).

Sales funnel from visit to purchase.

Tier pyramid with heights proportional to value.

Smooth trapezoid stages with conversion rates.

Sixty trading days of a fictional stock.

Candles on top, volume bars below acting as a brush.

Weekly candles labelled by week, no time gaps.

Candles plus a 10-day moving-average line.

Delivery time per carrier.

Boxes plus outliers drawn as a scatter series.

Page load time per page type, horizontal.

Boxes with every observation drawn on top, spread by a deterministic jitter (boxPlot wcc.jitter).

Horizontal boxes with jittered observations (raincloud form).

Quartiles computed from raw samples; resample to update.

Two samples with an identical box summary but different shapes, shown as boxes and as unit dots.

Boxes computed from raw observations (data[].points) with whiskers 'minmax', 'tukey' (1.5×IQR) and 'percentile' (5–95 %); outlier dots show what falls beyond.

points.show 'all' with circles in the darker series shade, squares in a custom colour, and dots coloured by value on horizontal boxes.

Response time per service with inner boxes.

Densities with every observation jittered on top.

Order value per region, horizontal.

Two-peaked commute times show up as double bulges.

Points coloured on a red–amber–green scale by value.

Toggle between density shapes and individual points.

Box whiskers at 1.5 × IQR, one density scale for all groups (normalize 'group'), dots in the series colour.

Time to first value per onboarding flow.

Dense sample with small square drops.

Cloud above, rain below, one colour per group.

Switch between four layouts of the same data.

1 000 request latencies binned automatically.

Two overlaid, normalised histograms.

Bars break apart into the individual observations.

One skewed sample binned by every rule: auto, Freedman–Diaconis, Sturges, Scott, Rice and square root.

normalize 'density': two groups of different size become comparable areas.

Three product groups by price, rating and sales.

Bubbles with a radial gradient for a spherical look.

Height against weight for three groups.

Incidents over time by severity.

Scatter points drawn as our own generated icon images.

Discrete ratings jittered so overlapping points stay visible.

60 000 points on canvas with xy zoom.

Orders by weekday and hour.

Each metric row gets its own colour ramp.

Named value ranges with their own colours, negatives included.

A continuous colour scale with a gradient legend bar.

Circular cells with value labels.

Hexagonal cells in offset rows.

Click a week/day cell to see its hours.

Load per 15-minute bucket across a day for several servers, on a datetime x axis with centred labels (heatmap wcc.centerTimeLabels).

A year of daily commits in a contribution calendar.

A 60 × 100 matrix.

Several on-call pages per day folded into one cell: sum, max, min, mean and last value side by side.

Cloud spend by service.

Two series laid out as groups.

Tiles coloured by change, red to green.

One colour per tile.

Click a group to zoom in; the breadcrumb returns.

Sectors and companies sized by market cap, coloured by daily change, dark-friendly.

The same hierarchy animates between treemap and sunburst.

Group headers centred, right-aligned, or set per level; the zoom breadcrumb sits top right.

A three-level research budget: group headers read from the left like a document outline (parents and per level), and the zoom breadcrumb sits top left where the eye starts. Click a programme to zoom.

The colour bar placed at the start, centre or end of the plot.

Budget by division, team and line item.

Rings built from drilldown references instead of nested data.

Half-circle rings for a compact header chart.

Headcount by org level; click to zoom.

CPU samples as an upward flame graph.

Narrow tiles with rotated labels.

Partition built from drilldown references, laid out left to right.

Root on the left (direction 'left'), siblings sorted by value, labels right-aligned with values.

Parents carry their own totals ('strict' leaves the unexplained rest empty), short branches extend to the edge, labels never rotate.

People pictograms, one figure = 1 million residents.

A hemicycle of 300 seats; parties are contiguous wedges.

One sunflower cluster per department with external labels.

Switch the grouping; the same marks fly to their new clusters.

Each city is one mark sized by population, packed by region.

Donors fill a heart outline from the bottom up.

Units arranged in a globe outline.

A packed crowd of 500 figures, minority in the centre.

Customers re-form from clusters into a brand mark (our own wave logo).

Pick an outline; the same marks re-form into it.

Deals stacked as columns per stage.

Star pictograms per rating, one star = 10 reviews.

Each ticket is a dot on a real time axis, swarmed per channel.

Storage capacity fills a battery outline.

A mountain outline drawn from plain coordinates with shapeFrom().

Every outline in the WCC shapes kit, filled with 120 marks.

Households inside a house outline.

Staff fill a person silhouette.

Street trees by species fill a tree outline.

Monthly output as a bolt-shaped unit chart.

Water use fills a drop.

Seats by cabin, nose to tail, inside a plane outline.

Payload mass by customer inside a rocket.

Blocked threats fill a shield.

Tickets move between human and bot handling as automation rolls out.

Stores as house marks on real x/y coordinates, coloured by format.

Visitors fill a target from the centre out; converters sit in the bull.

Staff by level in a pyramid outline, juniors at the base.

A waffle of 100 checks with stroke-only tick pictograms (pictogram outline).

One mini waffle per connection type (of 100 homes).

Each startup is a bubble sized by funding, packed and coloured by stage.

One named mark per person; hover shows who.

Play a race story (start, halfway, finish); the marks regroup per frame, with transport, scrubber and captions.

The same crowd regrouping every few seconds with snappy and crisp springs, a tween with fade-in, and identity transitions.

A wide bus glyph fitted 'contain', 'width' and 'height'; an unknown mark falls back to squares.

Column layout with columns.size 'auto': the tallest stack fills the height.

Scatter lanes spread by deterministic jitter instead of swarm; marks sized by value with an 'area' and a 'linear' scale.

scatter.orientation 'vertical': each lane becomes a column, the value axis runs up; swarm and jitter spread side by side.

One dot per country, swarmed by continent, horizontal.

Vertical swarms per species with a median tick.

Dots coloured by value on a continuous scale.

Matches per game mode, x = score, bubble = players.

Dots spread to one side only: side 'left' and 'right' on columns, 'top' and 'bottom' on rows.

100 cells, one per percent of generation.

One mini waffle per measure, out of 100 residents.

Satisfaction per product area, 2025 vs 2026.

Three periods with two highlighted regions.

Traffic share by channel.

Donut with total in the hole.

Round caps on donut segments.

Segments with parallel gaps and rounded corners (pie wcc.segmentGap / segmentRadius).

Shades of one colour.

Gradient-filled segments.

Pattern fills, readable without colour.

Buttons add, remove and randomise segments.

Each slice filled with our own small SVG pattern tile.

Click a slice to see its breakdown; the breadcrumb goes back.

One ring with the value in the centre.

Four rings with a total.

A 270° sweep with the legend beside the ring starts.

Gradient fill along the ring.

A dashed 270° gauge.

Half ring.

Our own icon in the centre of the ring.

Arc gauge on a 0–100 domain.

Threshold bands with gaps.

Custom domain with a formatted centre label.

Major and minor ticks with labels.

Pointer with bands as track.

The needle follows a live value; no overshoot on updates.

Half dial with a below-zero domain.

Needle gauges with round and square band ends; major and minor ticks drawn inside the arc.

One profile across six skills.

Three car models compared.

Alternating polygon background bands.

Wind frequency by direction.

Shades of one colour.

KPI tiles with line, area and bar sparklines.

Brush a date range on the timeline; the region and product charts refilter, and clicking a bar filters the others too.

Click a region, a product or a channel; the other charts show only the matching records. Shift-click adds to the selection.

Pick a sales channel; all three charts show how much of each total came through it, against the faded whole.

Live streams update every second; gauges follow.

KPIs, revenue trend, channel mix and top products.

Visitors, sources, devices, pages and a sparkline row.

An operations dashboard designed for dark mode.

Actual bars against target ticks and qualitative ranges.

Thin stems with round heads (bar wcc.mark: lollipop).

Stems topped with hollow rings, here horizontal (bar wcc.mark: ringStem).

Click two points to measure the change between them.

Click the chart to pin notes; remove the last one.

Scroll the story; the sticky chart zooms and annotates per step, with dot navigation.

Named views set the zoom window and hidden series; the current view becomes a share token, and a link with the token restores it.

Zoom, hide series or load new data, then step back with the toolbar, the buttons or Ctrl/Cmd+Z.

One area panel per region on a shared y scale, synced crosshair, latest value in each header.

Tidy rows (department, quarter, spend) become one column panel per department.

Nine tickers on independent scales; a panel() hook colours each green or red by its change.

Session-length histograms per signup cohort; the plugin gives every panel the same bins.

Eight gauges from one definition, sharing the same bands.

Lab values over 14 days; each panel shades its own normal range with scoped annotations.

Click a panel header to expand it; Esc or the header again restores the grid.

Six sensors with their own units: independent y scales and per-panel formatters.

The three best and three worst markets by growth, via an explicit panel order.

100 % stacked device split per country, one shared legend for all panels.

Weekday × hour heatmaps per office on one shared colour scale.

Battery per device; panel() turns a panel red and the header flags it when it ends below 70 %.

Task type split (Feature, Bug, Chore, Research) per team as donut panels with the same colour order.

Hovering a column dims the others; click keeps the selection.

Legend hover highlights one stack layer.

Hover a legend entry or line; the rest fade.

Legend hover highlights one area.

Each stage shows the paid-campaign share of its users inside the whole stage.

Hover or click a slice: it lifts out and the others dim.

Each ring shows the night shift's part of the plant figure; switch shifts with the buttons.

Each store tile shows its online part inside the faded whole; switch the measure with the buttons.

Forecast points are dashed and shaded apart from actuals.

Hover a bar to darken it; others stay put.

The drilldown plugin on bars, pie, treemap and lines.

Click a region to see its countries, then a country to see its cities.

Weeks drill into hours; the hourly level is a zoomable time series.

Drilling loads the next level asynchronously; a loading bar shows while it arrives.

Click a year to drill into its months; the breadcrumb or Backspace goes back.

Click a slice to see its breakdown; the breadcrumb goes back.

Click a week/day cell to see its hours.

Click a group to zoom in; the breadcrumb returns.

Rings built from drilldown references instead of nested data.

Partition built from drilldown references, laid out left to right.

The link plugin: brushing one chart filters the others.

Brush a date range on the timeline; the region and product charts refilter, and clicking a bar filters the others too.

Click a region, a product or a channel; the other charts show only the matching records. Shift-click adds to the selection.

Three stacked charts in one group share crosshair and tooltip.

A detail chart driven by a brush selection on an overview chart.

The highlight-filter plugin on every supported type.

Pick a sales channel; all three charts show how much of each total came through it, against the faded whole.

Hovering a column dims the others; click keeps the selection.

Legend hover highlights one stack layer.

Hover a legend entry or line; the rest fade.

Legend hover highlights one area.

Each stage shows the paid-campaign share of its users inside the whole stage.

Hover or click a slice: it lifts out and the others dim.

Each ring shows the night shift's part of the plant figure; switch shifts with the buttons.

Each store tile shows its online part inside the faded whole; switch the measure with the buttons.

Forecast points are dashed and shaded apart from actuals.

Hover a bar to darken it; others stay put.

Save a view, switch between views, share it as a link.

Named views set the zoom window and hidden series; the current view becomes a share token, and a link with the token restores it.

Rewind toolbar and recorded narrative frames.

Zoom, hide series or load new data, then step back with the toolbar, the buttons or Ctrl/Cmd+Z.

Scroll inside the card: each text block moves the chart to its view.

Scroll the story; the sticky chart zooms and annotates per step, with dot navigation.

Frames over time with captions, play and scrub.

Play a race story (start, halfway, finish); the marks regroup per frame, with transport, scrubber and captions.

Cities re-rank month by month with a ticker.

The trellis plugin: by, row × column grids, shared scales, promotion.

One area panel per region on a shared y scale, synced crosshair, latest value in each header.

Tidy rows (department, quarter, spend) become one column panel per department.

Nine tickers on independent scales; a panel() hook colours each green or red by its change.

Session-length histograms per signup cohort; the plugin gives every panel the same bins.

Eight gauges from one definition, sharing the same bands.

Lab values over 14 days; each panel shades its own normal range with scoped annotations.

Click a panel header to expand it; Esc or the header again restores the grid.

Six sensors with their own units: independent y scales and per-panel formatters.

The three best and three worst markets by growth, via an explicit panel order.

100 % stacked device split per country, one shared legend for all panels.

Weekday × hour heatmaps per office on one shared colour scale.

Battery per device; panel() turns a panel red and the header flags it when it ends below 70 %.

Task type split (Feature, Bug, Chore, Research) per team as donut panels with the same colour order.

SVG and canvas side by side.

60 000 points on canvas with xy zoom.

A 60 × 100 matrix.

The same dashboard in the selected preset and mode.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

All options of this type side by side.

Five lanes, one time axis: requests per 10 min coloured by error rate with deploys and pipeline runs, cost per cluster, error budget left (availability · p95 latency), p95 latency per service and traffic by region. Click to crossfilter, Esc clears.

The same lanes with a labelled focus lens around the incident on eu-k8s-2 after the checkout v2.41 deploy. Each lane calls out its value at the incident; L or the lens button switches to a linear axis.

Requests, p95 latency and regional traffic with a ×6 lens and 30 min of context on each side.

The Quint timeline's data on one ring (24 h clock, UTC, 10-min slots). Outside: requests per 10 min, colour = error rate, rim band = vs a typical day, ◆ deploys, ● pipeline runs, red ◆ the 18:40 alert. Inside, aligned with the slots: cost per cluster (€ / h; eu-k8s-2, eu-k8s-1, us-k8s-1 from the outside in) and p95 latency (ms; Checkout, Payments, Search, also from the outside in) as named heatmap rings, brighter = higher (log colour scale, keyed under the ring; "All 6 rows" shows every service and cluster); then error budget left per service over 30 days (legend %, ring label: availability · p95 latency) and Region › Service traffic (M requests in 24 h). The red wedge marks the incident 18:40–19:20 across every ring: hover or pin a slot in it and eu-k8s-2 cost, Checkout latency and EU traffic light up together. Compact screens keep every 10-minute slot and every displayed service/cluster row; only the empty centre, ring gaps and legend placement shrink. The two heat layers still show the explicitly named three-row story selection, not an aggregate of six rows.

Heart rate as columns (median per hour), SpO₂ as threshold-band cells (colour + pattern), BP as a sys/dia span, respiratory rate and temperature as lines at the true measurement time. Hours without a measurement are hatched, never 0. Now hand, alarm window and medication are caller data. Invented demo thresholds, no score, not a medical device.

A practice day 07:00–19:00 with few measurements: gaps stay visible ("not measured"); the last value per parameter is shown with its age under the ring.

The "bands" layer on a plain radialColumn: two rings with unit and per-slot aggregation (lowest SpO₂, highest respiratory rate) in tooltip, description and table.

api(chart).append(id, points) adds measurements and redraws at most once a second. The button sends invented values; the calling software always decides what they mean.

6 rooms (2 of them devices), 3 doctors, 2 assistants, 66 appointments. A route per person (colour + dash), lunch break and closed time hatched, now line. Conflicts in the header: person / room double booking (error), changeover under 5 min and outside opening hours (warning). Drag or Enter + arrow keys only propose; the data does not change.

The same model with lanes: "people": one lane per person; an appointment with two people (doctor + assistant) shows in both lanes.

view: "board" (automatic below 560 px): time downwards, one column per room.

304 appointments of the week, columns = days × rooms; Monday's conflicts stay marked.

schedule.flow.fromEvents(): check-in, waiting room, lab, exam and checkout per pseudonymous patient ID; waiting times are summarized as median / P90, never a sum or mean.

The same visits as a sankey: width = patients; the tooltip shows the median and P90 duration per transition (sankeyPlugin from flow.fromEvents()).

schedule.utilization() with 30-minute buckets: busy / open minutes. Closed buckets (before 07:30, lunch break 12:30–13:30) are hatched with their own legend entry instead of 0% (plotOptions.heatmap.empty); partly open buckets count only their open minutes.

Daily values from schedule.utilization() with day buckets; weekends closed: hatched, own legend entry, tooltip “closed”.

Four layers keyed by service and time. Outside: requests per 10 min (colour = error rate, rim band = vs a typical day, ◆ deploys, ● pipeline runs). Then cost per cluster (labelled by cluster type), per-service error budget left (ring label: availability · p95 latency), and Region › Service traffic at the core. Click a service, a cluster or a time slot to pin it; Esc clears. The story: an EU spike at 18:40 on eu-k8s-2 right after checkout v2.41. Compact layout retains every time slot, all six service budgets, all cluster costs and both Region › Service depths; ring space is shared by actual ring count.

One ring, four levels: Sector › Subsystem › 48 components › anomalies, with dependency ribbons at the core and the last six hours as a heat ring. The story: the 18:20 checkout deploy pushes eu gateways, queues, redis and postgres into the red, and it shows up as revenue at risk. Hover or click any level; the others follow.

A service × cluster status grid (worst severity per cell, with glyphs so it reads without colour) is linked by crossfilter to severity and cause charts and to a cause › service › impact flow. Click a cell, a severity or a cause; everything else, the flow and the summary narrow to the matching signals. Esc or a summary chip clears.

Six clusters as soft hulls (macro topology), their services as nodes (size = requests/s), relations as weighted edges, and anomaly nodes coloured by severity with an S1/S2/S3 badge in the label. The red edges trace the propagation path of the eu-west-2 incident. Switch to the bundled macro view, click a node for its details.

The centre is a call matrix (row calls column, req/s); around it the error budget left per service; outside the p95 latency per service in 4-hour windows. Every layer is keyed by service. Hover a cell to light both services in each ring and the reverse call; hover a header to light its whole row or column. Arrow keys move through the grid. The story: Matching is hot in the evening and has burnt most of its budget. Below 600 px, all eight current error budgets become one service-aligned heat band, each percentage repeated unchanged over that service's six windows (not a time series). The full 8 × 8 calls matrix and all 48 latency windows remain. EDG/RID/DRV/MAT/PRC/GEO/PAY/NTF abbreviate the same full service names in tooltips and matrix headers.

A status grid of ten services × six checks. Severity is colour and pattern (solid ok, dots info, hatch warning, cross-hatch critical), so it reads without hue. Around it the owning teams; outside the alert minutes per service over two weeks. Hover a status in the legend to find it; click it to hide those cells. A check lights the service-days it fired on (the last four days of each service where it fails).

Facet layout: a global control plane in the centre, six regions as facets, clusters and services on the outer shells. The dashed path traces how a cache eviction in Frankfurt travelled to billing in Virginia.

Eight business domains, 640 services: crowded shells stagger into rows, cross-domain traffic folds into one ribbon per domain pair (Payments – Commerce carries most of it), and two causal chains stay legible on top. Hover a node to light its facet and paths.

Force-directed graph with clusters, weighted edges and focus on hover.

The quint clock opens turned 90° so the evening sits on top: 18:00 at 12 o'clock, the 00:00 start at 3 o'clock (bold label, dashed seam). Every ring — latency, cost, error budget, traffic, the incident wedge — turns with the bars. Use the buttons top right, [ and ] on the focused chart (3-hour steps), Home to reset, or double-click a slot (Shift+Enter on a focused one) to bring it to the top. The turn is part of the view state and share link. Compact screens keep every 10-minute slot and every displayed service/cluster row; only the empty centre, ring gaps and legend placement shrink. The two heat layers still show the explicitly named three-row story selection, not an aggregate of six rows.

The team goal rings with the month around them, turned so day 16 opens at the top. The goal arcs, their laps and shadows turn with the day ring; the ring names and the legend stay level. Rotate in three-day steps with [ and ], or pick a day or a goal: a goal arc brings its end — where the team stands now — to the target. Compact layout keeps all seven teams and all thirty days, puts the complete goal legend below the dial and uses a smaller empty centre.

Seven day sectors, one smooth lane per cluster (CPU %, the inner lane in front). The grey band is each cluster's normal range, the hatched band and dashed crest the forecast after now (Sun 14:00), ◆ points outside the normal range (also on the rim). Outside: requests per hour; inside: cost per cluster, keyed to the lanes. Hover a lane for the hour across all clusters, a day for its 24 columns.

A 300° ring of months; in each sector the typical day (00–24 h) of solar, wind and grid supply, stacked (GW). Solar swells towards summer, wind towards winter, the grid fills the evening gap. Sectors link to the monthly totals outside by name; the core shows the annual mix.

Inner chord = container freight between regions (ribbon from exporter to importer); outer ring = each region's monthly exports, 12 bars per region, aligned under its chord arc. Hover a region to light its lanes and its twelve months; hover a lane to light both regions' months; hover a month to see its region and lanes.

Inner chord = tickets handed from one team to another this week (gradient from sender to receiver); outer bars = tickets closed per agent, with the rim band showing change vs last week. Click a team to keep it selected; Esc clears.

Three stacked layers, all aligned to the same twelve services. Innermost: a chord of service-to-service calls (k req/min). Middle: Team › Service sunburst. Outer: monthly cost per service, coloured by error rate. Hover anything: a call lights both services through every layer. Compact layout retains all twelve services, every call and both ownership depths; the chord arc has a deliberate 10 px width.

How to read: angle = time of day (15 min) · bar length = requests · bar colour = error rate (teal low → red high) · outer band = change vs last week (green up, red down) · inside = Region › Service. The ? opens the reading guide.

How to read: 365 daily revenue bars (length) · colour = margin, diverging around the 30 % target (blue below, orange above) · outer band = year over year · inside = Quarter › Month, aligned to its days. Hover a month to light its days.

How to read: bar length = load per hour · colour = price against the daily average (diverging at 0) · signed mini bars on the rim = change vs yesterday (outward = more, inward = less) · inside = energy source mix.

Correlated semantics with angular alignment: each day part spans exactly its 24 quarter hours. Hover a day part to light its bars (and the bracket on the rim); hover a bar to light its day part; click to keep the selection, Esc clears.

A sunburst of quarters and months, each month aligned to its own days on the daily ring (months have different lengths, so the inner angles follow the calendar, not the totals).

Unrelated axes: the donut is the channel mix, the ring is load by hour. With the filter interaction, clicking a channel shows that channel's own hourly load on the ring; click again or press Esc for all channels.

A Region › Country sunburst inside, 16 products outside. An explicit map says which products each country sells: hover a country (or a region) to see them, click to cross-filter the ring to that country's revenue.

A 24 h clock of incidents; the inner ring is the incident kind. Each kind links to the hours it happened in (datum links); hover an hour to see which kinds were involved, click a kind to show only its incidents.

The same chart under each link mode. none: independent rings. category: segments link the months named like them. angle: the months under their angle span. map: an explicit mapping, here a fiscal year that starts in April (Q1 → Apr–Jun).

A heatmap ring (Monday inside, Sunday outside, one cell per hour) sits under the hourly totals: the cells share the columns' angles, so hovering an hour lights that hour on every day and the tooltip lists the seven days. In the middle a polar area of the channel mix (radius = volume, independent of the ring). Compact layout retains the seven separate days × 24 hours and all five channels; no weekday averaging or row omission is applied.

Activity-style goal rings, one per team (any number; thickness and gaps adapt to the space). Past 100 % a ring laps over itself, the end cap casts a soft shadow. Outside: work items shipped per day. Hover a ring to light the days that team hit its daily target; hover a day to see which teams did. Compact layout keeps all seven teams and all thirty days, puts the complete goal legend below the dial and uses a smaller empty centre.

The gauge in the middle is the current load; the column ring is the same metric over the last 60 minutes, newest at the dashed “now” tick. Every tick the gauge animates and the oldest minute rolls off the ring (simulated; pauses while the tab is hidden).

The column ring with spectrum fill and composable inner layers: nested donut, sunburst, three layers at once.

Stacked, grouped and negative series, a gauge arc with targets and a 360-bar live ring.

Where a household budget goes: income sources into spending categories.

The same kind of flow drawn top to bottom: a yearly budget split into teams.

A material loop: recycled material flows back into production.

Plan changes across three yearly snapshots; stage labels above the columns.

Customers switching between plans in a quarter, as a directed chord diagram (the chord type of the premium plugin).

Node alignment: justify, left, right and centre - switch with the buttons.

Thirty small sources into five buckets: nodes and labels stay apart.

New values every 2.5 s; nodes and links glide to their new size.

Switch between two different structures; shared nodes morph, new ones fade in.

Particles travel along each link; their density follows the flow.

Quarterly frames with play / pause and a scrubber built in.

Hover a node or link to trace its path; the buttons highlight from code via the premium api.

Drag a node up or down; links follow and the position survives updates. nodeMove reports the offset.

plotOptions.sankey.drilldown: click a region to open its countries (EMEA → Germany goes one level deeper, loaded on demand); the breadcrumb, Escape or Up go back.

Two years side by side with the same node colours.

Per-node colours, wider nodes, rounded corners and label formatting.

Link colour modes (gradient, source, target, fixed), opacity and curvature.

The same diagram in the theme presets, light and dark.

Nodes, links and labels carry stable classes (wcc-node, wcc-link, wcc-label) for CSS overrides.

chart.fontFamily and label font size / weight.

plotOptions.sankey.plugins: a registered plugin reserves a row and draws column totals, an inline plugin adds a tooltip row, another one listens to events. Hooks: reserve, afterRender, event, tooltip, describe, destroy (the same API for every premium type).

Mirrored layout on a dir="rtl" page: the flow runs right to left, labels sit on the mirrored side, Arabic numbers.

One energy flow with nodeAlign 'left', 'center' and 'right': where nodes without further outflow settle; labels drawn outside the columns.

A product launch plan: groups, progress, dependencies, a today line and a task grid.

Tasks given as start / end ISO strings and comma-separated dependencies are parsed as is.

Zero-length tasks (or milestone: true) draw as diamonds and can be dependency targets.

The planned dates draw as a thin bar under each task, so slips are visible. Below 960 px the grid switches to a task/progress summary; all task data are retained. Use a wider view for the full columns.

The longest dependency chain to the launch is computed and highlighted.

Each group row shows a summary bar over its tasks with the rolled-up progress; groups collapse. Below 960 px the grid switches to a task/progress summary; all task data are retained. Use a wider view for the full columns.

Tasks interrupted by a holiday freeze, drawn as parts joined through the pause (segments: [[start, end], ...]); progress fills the working time, durations count working parts only, and dragging moves all parts. Below 960 px the grid switches to a task/progress summary; all task data are retained. Use a wider view for the full columns.

A working calendar (calendar: { workingDays, holidays }): non-working days are shaded and muted, holidays are tinted and named, tasks given as start + duration count working days, the Duration column counts working days and dragging keeps a task's working-day length while skipping the closed days. Below 960 px the grid switches to a task/progress summary; all task data are retained. Use a wider view for the full columns.

plotOptions.gantt.boundary draws the project start and deadline as labelled lines and shades the time outside them. Tasks that cross a boundary get a warning mark, a tooltip line and a screen-reader note; api().outOfBounds() lists them.

Finish-to-start, start-to-start, finish-to-finish and start-to-finish links with lag and lead (dependsOn: [{ id, type, lag }]); the critical path follows the driving link of each type, and a link the schedule breaks is flagged (dependencies.violations).

Arrow routing with many crossings, arrow size and colour.

dependencies.edit: hover a bar and drag from the round handle at its end onto another bar to link them (finish-to-start). Click a link and press Delete to remove it. Keyboard: focus a task and press L, move to another task and press L again (again on a linked pair unlinks). Loops are refused. Ctrl/Cmd+Z undoes. dependencyCreate / dependencyDelete are cancelable and write dependsOn back to your data.

Built-in grid columns: name, start, end, duration, progress and owner. Below 960 px the grid switches to a task/progress summary; all task data are retained. Use a wider view for the full columns.

Columns from your own task fields with headers, widths and alignment. Below 960 px the grid switches to a task/progress summary; all task data are retained. Use a wider view for the full columns.

Computed columns: a value(task) function per column (status from progress and dates). Below 960 px the grid switches to a task/progress summary; all task data are retained. Use a wider view for the full columns.

Outline numbers (1.1, 1.2, 2.1 …) computed from the groups. Below 960 px the grid switches to a task/progress summary; all task data are retained. Use a wider view for the full columns.

A small progress ring per task in the grid. Below 960 px the grid switches to a task/progress summary; all task data are retained. Use a wider view for the full columns.

Click to select, Ctrl / Shift-click for more; the selection is reported and settable via the api.

Built-in editing with drag.enabled: drag to move, drag either end to resize, double-click (or F2) to rename in place, Delete to remove, Insert / Alt+N to add, Ctrl+Z / Ctrl+Shift+Z to undo / redo. Every edit fires a cancelable event (taskChange / taskCreate / taskDelete) and historyChange.

drag.draw adds an empty row at the end of each group: drag across it to draw a new task (a dashed ghost shows the dates and length), or click "+ Add task" in the grid. The new item matches its neighbours' data shape and fires a cancelable taskCreate; undo removes it.

Jump to any task: its group opens, the timeline scrolls and the task is selected.

Sort by start, end or name; filter by owner. Below 960 px the grid switches to a task/progress summary; all task data are retained. Use a wider view for the full columns.

Each series is a collapsible group; expand / collapse all from the api.

Hover, select, drag (taskChange, can veto), group toggle and zoom events.

A vertical crosshair with a date pill follows the pointer over the timeline.

Colours per group (series.color) and per task (fillColor).

Labels beside or inside the bar (auto by room) with a formatter.

Stable classes (wcc-gantt-bar, wcc-gantt-progress, wcc-gantt-summary …) restyled with CSS.

plotOptions.gantt.annotations: marker lines ({ x, label }), shaded date ranges ({ x, x2, label }) and notes pinned to a task row ({ task, x, label }). Header chips never overlap the today chip or each other.

Tab into the chart and use the arrow keys; screen readers get a summary and a data table.

Built-in controls (today, zoom in / out, fit) plus app buttons driving the api (view, fit, zoom).

plotOptions.gantt.persist: { key } saves the view (zoom and scroll), collapsed groups and optionally the selection to localStorage and restores them on the next load. Zoom or collapse a group, then reload. api().clearSavedState() forgets it.

Mirrored layout on a dir="rtl" page (grid on the right, time running right to left, arrows and labels mirrored, Arabic dates), plus German dates and headers via a locale.

A one-day maintenance window with drag enabled and snap: 'hour': bars move and resize in whole hours.

labels.position 'inside': names sit in the bar after the percent, with ink matched to the progress fill or the tint; bars too narrow for their name fall back outside. Right below: the default 'right' for comparison.

An organisation chart with the root at the top.

The same chart growing upwards from the root.

Horizontal layout with the root on the left.

Horizontal layout with the root on the right.

Switch the orientation at runtime; nodes move to their new places.

A module graph laid out on circles around the root.

Leaves on the outer ring (cluster layout) in radial form.

Cards with initials avatar, title and subtitle.

Dots and labels only.

Multi-field cards: avatar, name, role · location, a direct-reports badge, a fields row (data fields: [{ label, value }]) and a progress bar (data progress: 0–100). Fields and progress also show in the tooltip; cards grow to fit them.

Metrics on every card: head count rolled up through the hierarchy, budget and open roles as a fields row, budget used as a progress bar. The formatter computes them from the node and its subtree (fields / progress returned from node.formatter).

Colour, badge, subtitle and initial collapse set per node in the data.

Card size per node: node.size(node) by level (executive 260 × 84, VPs 220 × 68, teams 168 × 52) plus a data override (size: { width, height }) on the Platform lead; the layout keeps the cards apart by their own widths and aligns cards on their level line.

node.autoHeight: long titles and roles wrap (up to node.maxLines) and the card grows to fit; short cards keep the default height and the level stays aligned.

Click a card toggle to expand or collapse its team; the view keeps the clicked card in place.

Each parent shows its number of direct reports on the toggle.

Labelled frames around departments (data wrapper: { label, color } or plotOptions.tree.wrappers: [{ id, label }]); frames nest (Platform inside Engineering), push neighbours apart and follow expand / collapse.

chart.fontFamily applies to titles, subtitles and badges.

Links coloured by branch, by depth, or a single colour; straight, elbow or curved.

Hover a node: its reporting line to the root and everything below light up.

Dot nodes with the labels outside the marks (top to bottom).

Dot nodes, left to right, labels beside the dots.

A 5 000-node tree opening at level 2; expand any branch.

Expand all, collapse to a level or toggle one node from the api.

Leaf cards under a parent stack in a column instead of a wide row (stackLeaves).

Collapsed nodes show how many nodes are hidden below (+N).

Click a card to select it; the api selects from code and reports the selection.

Focus a person: collapsed ancestors open, the card is selected and panned into view.

Zoom out (Ctrl + wheel or the controls) and cards turn into simplified marks; zoom in for full cards.

Nodes marked hasChildren: true load their children on first expand through plotOptions.tree.lazy.load (a Promise; simulated 600 ms latency here). A placeholder card with a spinner shows while loading; a failed load (Services fails once) shows a retry card. childrenLoad / childrenLoadError events.

Type a name or command; Enter focuses the person or runs the command through the api.

Values update every 2 s; badges and totals follow, the view stays put.

Step through yearly snapshots of the organisation; added and removed teams animate.

theme.mode: dark with the page surface (open with ?mode=dark for the whole page).

Restyle cards, titles and links through their classes (wcc-tnode-card, wcc-tnode-title, wcc-tlink).

Tab into the chart and walk the hierarchy with the arrow keys.

Mirrored layout on a dir="rtl" page: first child on the right, horizontal trees grow leftwards, avatar and accent on the right edge, right-aligned text; ←/→ keys swap.

Candles with volume, range selector, navigator, crosshair and readout.

Aggregate daily candles into weeks or months at runtime.

Linear, logarithmic or percent-change price axis.

20 years of daily candles (about 5 200); only the visible range is drawn, the navigator summarises all.

5-minute candles; a new tick every second updates the last candle, a new candle every 5 ticks; the view follows.

SMA, EMA and Bollinger overlays plus RSI and MACD panes.

Two more tickers rebased to the main close at the start of the view.

Zoom or pan either chart; the other follows (zoomed event + api.setRange).

Opt-in drawing tools (drawings.enabled) in a calm default style: a Fibonacci retracement with only the 50-61.8% pocket tinted, a support trend line and a resistance ray, in the theme accent and muted text tones. Pick a tool from the toolbar to add your own; anchors snap to candles, drawings are stored as { t, y }, serialise to JSON and persist in localStorage. All four tools with the vivid palette: "All Drawing Tools".

Earnings, dividend and split flags below or above the candles, with tooltips.

The readout shows open, high, low, close, change and volume (and overlay values) for the hovered candle.

Built-in range buttons plus a page toolbar driving the api (style, zoom, timeframe).

Up / down colours, theme presets and dark mode.

Export the chart as PNG / SVG or the visible data as CSV.

Every drawing tool at once with the vivid palette (drawings.palette: 'vivid'): trend line, horizontal ray, Fibonacci retracement and rectangle from the toolbar, plus entry / stop / target levels over a Bollinger band. Anchors snap to the candle (magnet to its open / high / low / close), a selected drawing shows handles to drag, Delete removes it, Alt+arrows nudge it; drawings are stored as { t, y } so they survive zoom and timeframe changes, serialise to JSON and persist in localStorage (storageKey).

Broadband adoption by country (illustrative), with a colour bar legend.

City sizes as proportional circles, with a size key.

Office pins with labels and partner sites as diamonds; markers keep their size while zooming.

6 000 sample sightings binned into screen hexagons; size and colour follow the count.

The choropleth drawn as a dot (pixel) map.

Flight volumes from a hub; width follows the value, dashes show direction.

A round-the-world itinerary as one route along great circles (stops, arrows, total distance in the tooltip) and a dashed shipping lane through named waypoints.

The map alone: graticule, sphere and borders without data.

Absolute counts divided by population (per million people).

Equal Earth, Mercator, equirectangular and an orthographic globe.

registerMap() with our own GeoJSON (a fictional island with four districts), then used by name.

style: 'tiles' turns the map into a tile cartogram: one equal-size hexagon per state (our own US grid), so Rhode Island weighs as much as Texas. Hover, selection, keyboard and zoom work as on the geographic map. Right: square tiles; below: binning store points into hexagons over the real map (hexbin).

Rows keyed by ISO-2, ISO-3 or English name all join to the same regions.

Inline GeoJSON (our own: a fictional campus) with a bubble layer on top, no registry needed.

Linear, log, quantize, diverging and explicit ranges on the same data.

Named palettes (colorScale.palette): sequential ramps, viridis (colour-blind safe) and diverging pairs; reverse flips any of them. PG.api(c).palettes() lists the names.

Hatch, cross and dot fills per range (also in the legend), and automatic patterns per bucket for colour-blind-safe reading; patterns keep their density while zooming.

Visited countries filled with their flags (inline SVG images; only image data URIs, http(s) or relative URLs are accepted).

Theme presets and dark mode on the same map.

Zoom to a region, zoom by a factor, reset, or rotate the globe from code.

Click a country to select it; the event reports it and the api can select from code.

plotOptions.map.drilldown: click the United States to open its states; the breadcrumb (or Escape) goes back. Right: the level is fetched on demand with load() (600 ms) and the drilldown event is logged.

Callouts with leader lines, a region note with a dashed outline, and ocean labels; cards flip to stay inside the plot and keep their size while zooming.

Tab into the map; arrow keys move between regions with data, Enter selects, +/- zoom.

Export the map as PNG / SVG or the data as CSV.

US states with the conic 'albers' projection and the composite 'albersUsa' (Alaska and Hawaii as insets).

The sequential colour ramps by name: blue, green, purple, orange, red and gray (teal, heat and viridis appear on other pages).

Office-to-office travel: groups sorted 'asc' and 'desc' by size, ribbons coloured by their 'source' or 'target'.

Cloud spend by region and service, columns sorted 'desc' and 'asc' by their total.

A small library dependency graph with nodes.sizeBy 'value', 'degree' and 'none', and the same graph forced to renderer 'svg' and 'canvas'.

Twenty-four invented weather stations, rainfall this season against last: fill.type 'series' keeps one colour per season instead of the angle spectrum, and categoryLabels.orientation 'radial' sets every station name along its spoke.

One day of an invented office building's power use, stacked by load (HVAC, lighting, plug loads) around a 24-hour clock with the source mix as a donut inside. The same chart with legend.position 'right' and 'bottom'.

Variable-width stacked columns: width is the segment size, height the share.

Flows between groups around a circle.

Engineering lab page with every option of the sankey type side by side.

Engineering lab page with every option of the gantt type side by side.

Engineering lab page with every option of the tree type side by side.

Engineering lab page with every option of the stock type side by side.

Engineering lab page with every option of the map type side by side.