Line

Trends over categories or time.

Basic lineOne series of monthly sign-ups on a category axis.
covered
Line with data labelsTwo temperature lines with value labels and markers.
covered
Zoomable time seriesTwo years of daily traffic with x zoom, toolbar and a gradient area under the line.
covered
Line with annotationsShare price with a target line, a highlighted range and point callouts.
covered
Synced chartsThree stacked charts in one group share crosshair and tooltip.
covered
Brush chartA detail chart driven by a brush selection on an overview chart.
covered
SteplinePrice tiers that change in steps.
covered
Gradient lineA line whose stroke runs through a colour gradient.
covered
Line with missing dataSensor readings with gaps (null) that break the line.
covered
Dashed linesActual, plan and forecast lines with different dash patterns.
covered
RealtimeA line that appends a point every second and slides.
covered
Large dataset, downsampled50 000 points drawn with peak-preserving decimation.
covered-better
Annotation tooltipsRelease markers on a line; hovering or focusing a marker shows what shipped (annotation wcc.tooltip).
covered
Line with drilldownClick a year to drill into its months; the breadcrumb or Backspace goes back.
covered

Area

Filled lines for volume and accumulation.

Basic areaWeekly downloads as a smooth filled area.
covered
Spline areaTwo overlapping smooth areas.
covered
Datetime areaA datetime area with range buttons (1M / 6M / 1Y / All).
covered
Area with negative valuesNet cash flow that crosses zero, filled to the zero line.
covered
Contribution-style areaA compact activity area with a brush overview, in the style of a code-host contributions graph.
covered
Stacked areaThree stacked channels over time.
covered
Area with missing dataAreas with null gaps.
covered
Irregular time seriesThree series sampled at different, uneven timestamps.
covered

Column

Vertical bars for comparing categories.

Basic columnThree products per quarter as grouped columns.
covered
Column with data labelsMonthly conversion rate with labels on top of each column.
covered
Stacked columnSupport tickets by severity, stacked with totals.
covered
100% stacked columnDevice share per month, normalised to 100%.
covered
Rotated labelsLong category names rotated to fit.
covered
Column with negativesMonthly profit and loss, coloured by sign.
covered
Dynamically loadedClick a year column to load its quarters into a second chart.
covered
Distributed columnsOne colour per column, legend hidden.
covered
Range columnFloating min–max columns of daily temperatures.
covered
Grouped stacked columnBudget and actual stacks side by side per quarter.
covered
Column with goal markersActual columns with a target marker on each.
covered
Grouped axis labelsMonths grouped under year labels on the x axis.
covered
Column drilldownClick a region to see its countries, then a country to see its cities.
covered
Drilldown with zoomWeeks drill into hours; the hourly level is a zoomable time series.
covered
Async drilldownDrilling loads the next level asynchronously; a loading bar shows while it arrives.
covered

Bar

Horizontal bars for ranked and long-label data.

Basic barRanked horizontal bars.
covered
Grouped barTwo years side by side per team.
covered
Stacked barTime spent per activity, stacked per person.
covered
100% stacked barSurvey answers per question as shares.
covered
Population pyramid (negatives)Two-sided bars around zero with absolute labels.
covered
Reversed barBars growing from the right with the axis reversed.
covered
Custom data labelsCategory names written inside the bars, axis labels hidden.
covered
Patterned barStacked bars filled with line and dot patterns (print-friendly).
covered
Bar with image fillBars filled with generated texture images (our own SVG tiles).
covered
Bar with goal markersHorizontal bars with target ticks.
covered
Grouped stacked barTwo stacked groups per category, horizontal.
covered
Bar chart raceCities re-rank month by month with a ticker.
covered-better
Bar race: missing values hiddenStudios without a figure for a month drop out of the race (nulls 'hide') instead of showing a dash.
covered

Mixed / combo

Several series types and y axes in one chart.

Line and columnRevenue columns with a margin line on a second axis.
covered
Multiple y axesThree measures with three coloured y axes.
covered
Dual axes, zero alignedTwo axes with different scales whose zero lines coincide (yaxis wcc.alignZero).
covered
Dual axis currency labelsEuro and US-dollar axes with compact currency labels.
covered
Line and areaAn area of capacity with a line of demand.
covered
Line, column and areaThree series types combined.
covered

Range area

Bands between a low and a high value.

Basic range areaDaily low–high temperature band.
covered
Range band with line and forecastConfidence band plus median line and a dashed forecast.
covered

Streamgraph

Flowing stacked areas around a centre baseline.

Basic streamgraphListening hours by genre over two years.
covered-better
Streamgraph, expandedShare of total (0–100%) instead of absolute values.
covered
Many seriesTwelve product lines in one stream.
covered
Conversation streamSymmetric (silhouette) stream of topics in a community thread, with labelled bands and a story note.
covered
Layer orderThe same stream with order 'inside-out' (default), 'inverse' and 'none' (data order).
covered

Waterfall

Running totals of positive and negative steps.

Basic waterfallOpening to closing cash with subtotals.
covered-better
Horizontal waterfallA horizontal bridge with long step names.
covered
Crowded currency labelsTwelve monthly steps in euros plus a total.
covered-better

Dumbbell

Two or three points per row joined by a line.

Basic dumbbellEngagement score in 2024 and 2026 per department.
covered
Vertical dumbbellStart and current salary per level, vertical.
covered
Three measuresMinimum, target and actual per region.
covered

Timeline / range bar

Floating bars over time.

Simple timelineProject phases on a date axis.
covered
Grouped rowsSeveral people per row, coloured by role (rangeBarGroupRows).
covered
Multi-series timelinePlanned and actual bars per task.
covered
Advanced timelineOverlapping bars with data labels showing durations.
covered
Per-bar coloursEach bar picks its own colour (fillColor).
covered

Funnel

Stages that narrow.

FunnelSales funnel from visit to purchase.
covered
PyramidTier pyramid with heights proportional to value.
covered
Tapered trapezoid funnelSmooth trapezoid stages with conversion rates.
covered-better

Candlestick

Open-high-low-close candles.

Basic candlestickSixty trading days of a fictional stock.
covered
Candles with volume brushCandles on top, volume bars below acting as a brush.
covered
Candles on a category axisWeekly candles labelled by week, no time gaps.
covered
Candles with moving averageCandles plus a 10-day moving-average line.
covered

Box plot

Quartile boxes with whiskers and outliers.

Basic box plotDelivery time per carrier.
covered
Box plot with outliersBoxes plus outliers drawn as a scatter series.
covered
Horizontal box plotPage load time per page type, horizontal.
covered
Box plot with pointsBoxes with every observation drawn on top, spread by a deterministic jitter (boxPlot wcc.jitter).
covered
Horizontal box plot with pointsHorizontal boxes with jittered observations (raincloud form).
covered-better
From raw observationsQuartiles computed from raw samples; resample to update.
covered-better
Same box, different dataTwo samples with an identical box summary but different shapes, shown as boxes and as unit dots.
covered
Raw samples: whisker rulesBoxes computed from raw observations (data[].points) with whiskers 'minmax', 'tukey' (1.5×IQR) and 'percentile' (5–95 %); outlier dots show what falls beyond.
covered
Raw samples: every observationpoints.show 'all' with circles in the darker series shade, squares in a custom colour, and dots coloured by value on horizontal boxes.
covered

Violin

Mirrored density shapes.

Basic violinResponse time per service with inner boxes.
covered-better
Violin with jitterDensities with every observation jittered on top.
covered
Horizontal violinOrder value per region, horizontal.
covered
Bimodal, horizontalTwo-peaked commute times show up as double bulges.
covered
Colour-graded jitterPoints coloured on a red–amber–green scale by value.
covered
Violin ⇄ swarm morphToggle between density shapes and individual points.
covered-better
Tukey whiskers on a shared scaleBox whiskers at 1.5 × IQR, one density scale for all groups (normalize 'group'), dots in the series colour.
covered

Raincloud

Half violin, box and raw points.

Basic raincloudTime to first value per onboarding flow.
covered
Cloud and rainDense sample with small square drops.
covered
Horizontal raincloudCloud above, rain below, one colour per group.
covered
Raincloud variationsSwitch between four layouts of the same data.
covered

Histogram

Binned frequency distributions.

Latency distribution1 000 request latencies binned automatically.
covered-better
Comparing distributionsTwo overlaid, normalised histograms.
covered
Explode to observationsBars break apart into the individual observations.
covered-better
Bin rules side by sideOne skewed sample binned by every rule: auto, Freedman–Diaconis, Sturges, Scott, Rice and square root.
covered
Density scalenormalize 'density': two groups of different size become comparable areas.
covered

Bubble

x, y and size.

Simple bubbleThree product groups by price, rating and sales.
covered
Shaded bubbleBubbles with a radial gradient for a spherical look.
covered

Scatter

Points on two numeric axes.

Basic scatterHeight against weight for three groups.
covered
Datetime scatterIncidents over time by severity.
covered
Image markersScatter points drawn as our own generated icon images.
covered
Scatter with jitterDiscrete ratings jittered so overlapping points stay visible.
covered
Large scatter60 000 points on canvas with xy zoom.
covered-better

Heatmap

Colour-encoded matrices.

Basic heatmapOrders by weekday and hour.
covered
One colour per rowEach metric row gets its own colour ramp.
covered
Colour rangesNamed value ranges with their own colours, negatives included.
covered
Gradient legendA continuous colour scale with a gradient legend bar.
covered-better
Round cellsCircular cells with value labels.
covered
HoneycombHexagonal cells in offset rows.
covered-better
Heatmap drilldownClick a week/day cell to see its hours.
covered
Continuous time heatmapLoad per 15-minute bucket across a day for several servers, on a datetime x axis with centred labels (heatmap wcc.centerTimeLabels).
covered
Calendar heatmapA year of daily commits in a contribution calendar.
covered-better
Dense heatmapA 60 × 100 matrix.
partial
Calendar: aggregating busy daysSeveral on-call pages per day folded into one cell: sum, max, min, mean and last value side by side.
covered

Treemap

Nested rectangles sized by value.

Basic treemapCloud spend by service.
covered
Multi-series treemapTwo series laid out as groups.
covered
Colour scaleTiles coloured by change, red to green.
covered
Distributed treemapOne colour per tile.
covered
Treemap drilldownClick a group to zoom in; the breadcrumb returns.
covered-better
Nested market mapSectors and companies sized by market cap, coloured by daily change, dark-friendly.
covered
Treemap ⇄ sunburst morphThe same hierarchy animates between treemap and sunburst.
covered-better
Nested headers: alignment and breadcrumbGroup headers centred, right-aligned, or set per level; the zoom breadcrumb sits top right.
covered
Nested headers left, breadcrumb top leftA 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.
covered
Gradient legend alignmentThe colour bar placed at the start, centre or end of the plot.
covered

Sunburst

Radial hierarchy rings.

Basic sunburstBudget by division, team and line item.
covered
From a drilldown configRings built from drilldown references instead of nested data.
covered
Semi-circle sunburstHalf-circle rings for a compact header chart.
covered

Icicle

Rectangular partitions and flame graphs.

Basic icicleHeadcount by org level; click to zoom.
covered
Flame graphCPU samples as an upward flame graph.
covered
Vertical labelsNarrow tiles with rotated labels.
covered
From a drilldown configPartition built from drilldown references, laid out left to right.
covered
Sorted, growing to the rightRoot on the left (direction 'left'), siblings sorted by value, labels right-aligned with values.
covered
Ragged tree, strict partitionParents carry their own totals ('strict' leaves the unexplained rest empty), short branches extend to the edge, labels never rotate.
covered

Unit & pictogram

One mark per unit, grouped, packed, shaped or pictographic. Free in WCC.

Pictogram populationPeople pictograms, one figure = 1 million residents.
covered
ParliamentA hemicycle of 300 seats; parties are contiguous wedges.
covered
Workforce clustersOne sunflower cluster per department with external labels.
covered
Population explorerSwitch the grouping; the same marks fly to their new clusters.
covered-better
City bubblesEach city is one mark sized by population, packed by region.
covered
Heart donorsDonors fill a heart outline from the bottom up.
covered
Globe populationUnits arranged in a globe outline.
covered
Pictogram crowdA packed crowd of 500 figures, minority in the centre.
covered
Logo-shaped storyCustomers re-form from clusters into a brand mark (our own wave logo).
covered
Shape forgePick an outline; the same marks re-form into it.
covered
Pipeline stagesDeals stacked as columns per stage.
covered
Review ratingsStar pictograms per rating, one star = 10 reviews.
covered
Response timesEach ticket is a dot on a real time axis, swarmed per channel.
covered-better
Battery storageStorage capacity fills a battery outline.
covered
Bring your own shapeA mountain outline drawn from plain coordinates with shapeFrom().
covered
Silhouette galleryEvery outline in the WCC shapes kit, filled with 120 marks.
covered
House tenureHouseholds inside a house outline.
covered
Human workforceStaff fill a person silhouette.
covered
Tree canopyStreet trees by species fill a tree outline.
covered
Solar generationMonthly output as a bolt-shaped unit chart.
covered
Water silhouetteWater use fills a drop.
covered
Flight cabinsSeats by cabin, nose to tail, inside a plane outline.
covered
Rocket payloadsPayload mass by customer inside a rocket.
covered
Shield securityBlocked threats fill a shield.
covered
Support automationTickets move between human and bot handling as automation rolls out.
covered
Store locationsStores as house marks on real x/y coordinates, coloured by format.
covered
Target conversionVisitors fill a target from the centre out; converters sit in the bull.
covered
Pyramid hierarchyStaff by level in a pyramid outline, juniors at the base.
covered
Compliance checksA waffle of 100 checks with stroke-only tick pictograms (pictogram outline).
covered
Connection typesOne mini waffle per connection type (of 100 homes).
covered
Startup fundingEach startup is a bubble sized by funding, packed and coloured by stage.
covered
Team rosterOne named mark per person; hover shows who.
covered
Marathon storyboardPlay a race story (start, halfway, finish); the marks regroup per frame, with transport, scrubber and captions.
covered
Gather motion presetsThe same crowd regrouping every few seconds with snappy and crisp springs, a tween with fade-in, and identity transitions.
covered
Pictogram fit and fallbackA wide bus glyph fitted 'contain', 'width' and 'height'; an unknown mark falls back to squares.
covered
Columns sized to fitColumn layout with columns.size 'auto': the tallest stack fills the height.
covered
Jitter lanes and linear mark sizeScatter lanes spread by deterministic jitter instead of swarm; marks sized by value with an 'area' and a 'linear' scale.
covered
Vertical swarm lanesscatter.orientation 'vertical': each lane becomes a column, the value axis runs up; swarm and jitter spread side by side.
covered

Beeswarm

Every observation as a dot, packed without overlap.

Life expectancy swarmOne dot per country, swarmed by continent, horizontal.
covered
Body mass by speciesVertical swarms per species with a median tick.
covered
Salary by departmentDots coloured by value on a continuous scale.
covered
Game scores, sizedMatches per game mode, x = score, bubble = players.
covered-better
Half swarmsDots spread to one side only: side 'left' and 'right' on columns, 'top' and 'bottom' on rows.
covered

Waffle

Grids of squares for parts of a whole.

Energy mix100 cells, one per percent of generation.
covered-better
Urban small multiplesOne mini waffle per measure, out of 100 residents.
covered

Slope

Change between two points in time.

Basic slopeSatisfaction per product area, 2025 vs 2026.
covered-better
Multi groupThree periods with two highlighted regions.
covered

Pie & donut

Parts of a whole.

Simple pieTraffic share by channel.
covered
Simple donutDonut with total in the hole.
covered
Rounded donutRound caps on donut segments.
covered
Rounded, spacedSegments with parallel gaps and rounded corners (pie wcc.segmentGap / segmentRadius).
covered
Monochrome pieShades of one colour.
covered
Gradient donutGradient-filled segments.
covered
Pattern donutPattern fills, readable without colour.
covered
Donut updateButtons add, remove and randomise segments.
covered
Pie with image fillsEach slice filled with our own small SVG pattern tile.
covered
Donut drilldownClick a slice to see its breakdown; the breadcrumb goes back.
covered

Radial bar

Circular progress.

Circle chartOne ring with the value in the centre.
covered
Multiple ringsFour rings with a total.
covered
Custom angleA 270° sweep with the legend beside the ring starts.
covered
Gradient ringGradient fill along the ring.
covered
Stroked gaugeA dashed 270° gauge.
covered
Semi circleHalf ring.
covered
Ring with iconOur own icon in the centre of the ring.
covered

Gauge

Dials with domains, bands, ticks and needles.

Basic gaugeArc gauge on a 0–100 domain.
covered
BandsThreshold bands with gaps.
covered
Custom labelCustom domain with a formatted centre label.
covered
TicksMajor and minor ticks with labels.
covered
Needle gaugePointer with bands as track.
covered
Live needleThe needle follows a live value; no overshoot on updates.
covered
Semi circle gaugeHalf dial with a below-zero domain.
covered
Band caps and inside ticksNeedle gauges with round and square band ends; major and minor ticks drawn inside the arc.
covered

Radar

Spider charts.

Basic radarOne profile across six skills.
covered
Multiple seriesThree car models compared.
covered
Polygon fillAlternating polygon background bands.
covered

Polar area

Wedges with radius by value.

Basic polar areaWind frequency by direction.
covered
Monochrome polar areaShades of one colour.
covered

Sparklines

Tiny axis-less charts.

Sparkline tilesKPI tiles with line, area and bar sparklines.
covered

Dashboards

Complete layouts built from core charts.

Sales analyticsKPIs, revenue trend, channel mix and top products.
covered
Dark mode dashboardAn operations dashboard designed for dark mode.
covered-better
Web analyticsVisitors, sources, devices, pages and a sparkline row.
covered
Realtime monitoringLive streams update every second; gauges follow.
covered

Custom series

Marks beyond the built-in shapes.

BulletActual bars against target ticks and qualitative ranges.
covered
LollipopThin stems with round heads (bar wcc.mark: lollipop).
covered
Ring stemStems topped with hollow rings, here horizontal (bar wcc.mark: ringStem).
covered

Interactivity

Cross-chart and tool interactions.

Crossfilter dashboardBrush a date range on the timeline; the region and product charts refilter, and clicking a bar filters the others too.
covered
Crossfilter categoricalClick a region, a product or a channel; the other charts show only the matching records. Shift-click adds to the selection.
covered
Measure rulerClick two points to measure the change between them.
partial
Annotation authoringClick the chart to pin notes; remove the last one.
partial

Narrative & state

Storytelling and chart state.

ScrollytellingScroll the story; the sticky chart zooms and annotates per step, with dot navigation.
covered
Shareable viewsNamed views set the zoom window and hidden series; the current view becomes a share token, and a link with the token restores it.
covered
Undo / redoZoom, hide series or load new data, then step back with the toolbar, the buttons or Ctrl/Cmd+Z.
covered

Trellis

Small multiples from one chart definition with the trellis plugin: shared scales, a synced crosshair, one legend.

Revenue by regionOne area panel per region on a shared y scale, synced crosshair, latest value in each header.
covered
Department by quarterTidy rows (department, quarter, spend) become one column panel per department.
covered
Stock performance gridNine tickers on independent scales; a panel() hook colours each green or red by its change.
covered
Distribution by cohortSession-length histograms per signup cohort; the plugin gives every panel the same bins.
covered
KPI gauge gridEight gauges from one definition, sharing the same bands.
covered
Clinical reference bandsLab values over 14 days; each panel shades its own normal range with scoped annotations.
covered
Panel promotionClick a panel header to expand it; Esc or the header again restores the grid.
covered
Metrics by unitSix sensors with their own units: independent y scales and per-panel formatters.
covered
Top and bottom marketsThe three best and three worst markets by growth, via an explicit panel order.
covered
Traffic by country100 % stacked device split per country, one shared legend for all panels.
covered
Activity by locationWeekday × hour heatmaps per office on one shared colour scale.
covered
IoT device healthBattery per device; panel() turns a panel red and the header flags it when it ends below 70 %.
covered
Task mix by teamTask type split (Feature, Bug, Chore, Research) per team as donut panels with the same colour order.
covered

Highlight filter

Focus one item and dim the rest, or (highlight-filter plugin) show the filtered part inside each whole.

Filter by dashboardPick a sales channel; all three charts show how much of each total came through it, against the faded whole.
covered
Column highlightHovering a column dims the others; click keeps the selection.
covered
Stacked highlightLegend hover highlights one stack layer.
covered
Line highlightHover a legend entry or line; the rest fade.
covered
Area highlightLegend hover highlights one area.
covered
Funnel highlightEach stage shows the paid-campaign share of its users inside the whole stage.
covered
Pie highlightHover or click a slice: it lifts out and the others dim.
covered
Gauge highlightEach ring shows the night shift's part of the plant figure; switch shifts with the buttons.
covered
Treemap highlightEach store tile shows its online part inside the faded whole; switch the measure with the buttons.
covered
Forecast highlightForecast points are dashed and shaded apart from actuals.
covered
Bar highlightHover a bar to darken it; others stay put.
covered

Sankey

Basic SankeyWhere a household budget goes: income sources into spending categories.
covered
Vertical SankeyThe same kind of flow drawn top to bottom: a yearly budget split into teams.
covered
Circular SankeyA material loop: recycled material flows back into production.
covered-better
AlluvialPlan changes across three yearly snapshots; stage labels above the columns.
covered
ChordCustomers switching between plans in a quarter, as a directed chord diagram (the chord type of the premium plugin).
covered
Alternate NodeNode alignment: justify, left, right and centre - switch with the buttons.
covered
Node OverlappingThirty small sources into five buckets: nodes and labels stay apart.
covered-better
Data UpdateNew values every 2.5 s; nodes and links glide to their new size.
covered
Data MorphSwitch between two different structures; shared nodes morph, new ones fade in.
covered
Particle FlowParticles travel along each link; their density follows the flow.
covered
PlaybackQuarterly frames with play / pause and a scrubber built in.
covered
Path HighlightHover a node or link to trace its path; the buttons highlight from code via the premium api.
covered
Draggable NodesDrag a node up or down; links follow and the position survives updates. nodeMove reports the offset.
covered
Drill DownplotOptions.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.
covered
ComparisonTwo years side by side with the same node colours.
covered
Node CustomizationPer-node colours, wider nodes, rounded corners and label formatting.
covered
Edge OptionsLink colour modes (gradient, source, target, fixed), opacity and curvature.
covered
ThemesThe same diagram in the theme presets, light and dark.
covered
CSS ThemingNodes, links and labels carry stable classes (wcc-node, wcc-link, wcc-label) for CSS overrides.
covered
Custom Fontschart.fontFamily and label font size / weight.
covered
PluginsplotOptions.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).
covered
Localization RTLMirrored layout on a dir="rtl" page: the flow runs right to left, labels sit on the mirrored side, Arabic numbers.
covered
Node alignmentOne energy flow with nodeAlign 'left', 'center' and 'right': where nodes without further outflow settle; labels drawn outside the columns.
covered

Gantt

Basic GanttA product launch plan: groups, progress, dependencies, a today line and a task grid.
covered
Data ParsingTasks given as start / end ISO strings and comma-separated dependencies are parsed as is.
covered
MilestonesZero-length tasks (or milestone: true) draw as diamonds and can be dependency targets.
covered
BaselineThe planned dates draw as a thin bar under each task, so slips are visible.
covered
Critical PathThe longest dependency chain to the launch is computed and highlighted.
covered
RollupsEach group row shows a summary bar over its tasks with the rolled-up progress; groups collapse.
covered
Split TasksTasks 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.
covered
Working CalendarA 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.
covered
Project BoundaryplotOptions.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.
covered
Dependency TypesFinish-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).
covered
Dependency ArrowsArrow routing with many crossings, arrow size and colour.
covered-better
Dependency Editdependencies.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.
covered
Task List ColumnsBuilt-in grid columns: name, start, end, duration, progress and owner.
covered
Custom ColumnsColumns from your own task fields with headers, widths and alignment.
covered
Extended ColumnsComputed columns: a value(task) function per column (status from progress and dates).
covered
WBS ColumnOutline numbers (1.1, 1.2, 2.1 …) computed from the groups.
covered
Progress Ring ColumnA small progress ring per task in the grid.
covered
SelectionClick to select, Ctrl / Shift-click for more; the selection is reported and settable via the api.
covered
Task CRUDBuilt-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.
covered
Draw Taskdrag.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.
covered
Scroll To TaskJump to any task: its group opens, the timeline scrolls and the task is selected.
covered
Sort FilterSort by start, end or name; filter by owner.
covered
GroupingEach series is a collapsible group; expand / collapse all from the api.
covered
EventsHover, select, drag (taskChange, can veto), group toggle and zoom events.
covered
CrosshairA vertical crosshair with a date pill follows the pointer over the timeline.
covered
Custom ColorsColours per group (series.color) and per task (fillColor).
covered
Bar LabelsLabels beside or inside the bar (auto by room) with a formatter.
covered
CSS ThemingStable classes (wcc-gantt-bar, wcc-gantt-progress, wcc-gantt-summary …) restyled with CSS.
covered
AnnotationsplotOptions.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.
covered
AccessibilityTab into the chart and use the arrow keys; screen readers get a summary and a data table.
covered-better
ToolbarBuilt-in controls (today, zoom in / out, fit) plus app buttons driving the api (view, fit, zoom).
covered
State PersistenceplotOptions.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.
covered
Localization RTLMirrored 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.
covered
Hourly drag snapA one-day maintenance window with drag enabled and snap: 'hour': bars move and resize in whole hours.
covered
Labels inside the barslabels.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.
covered

Tree

Top To BottomAn organisation chart with the root at the top.
covered
Bottom To TopThe same chart growing upwards from the root.
covered
Left To RightHorizontal layout with the root on the left.
covered
Right To LeftHorizontal layout with the root on the right.
covered
Dynamic View ChangeSwitch the orientation at runtime; nodes move to their new places.
covered
Radial LayoutA module graph laid out on circles around the root.
covered
Radial DendrogramLeaves on the outer ring (cluster layout) in radial form.
covered
Default CardsCards with initials avatar, title and subtitle.
covered
MinimalDots and labels only.
covered
Rich Node CardMulti-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.
covered
Org Chart With MetricsMetrics 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).
covered
Per Node OptionsColour, badge, subtitle and initial collapse set per node in the data.
covered
Per Node SizeCard 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.
covered
Auto Node Heightnode.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.
covered
Expandable CardsClick a card toggle to expand or collapse its team; the view keeps the clicked card in place.
covered
Count BadgesEach parent shows its number of direct reports on the toggle.
covered
Node WrappersLabelled 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.
covered
Custom Font Optionschart.fontFamily applies to titles, subtitles and badges.
covered
Edge Color ModeLinks coloured by branch, by depth, or a single colour; straight, elbow or curved.
covered
Active PathHover a node: its reporting line to the root and everything below light up.
covered
External LabelsDot nodes with the labels outside the marks (top to bottom).
covered
External Labels LRDot nodes, left to right, labels beside the dots.
covered
Expand CollapseA 5 000-node tree opening at level 2; expand any branch.
covered
Batch Expand CollapseExpand all, collapse to a level or toggle one node from the api.
covered
Group Leaf NodesLeaf cards under a parent stack in a column instead of a wide row (stackLeaves).
covered
Collapse BadgesCollapsed nodes show how many nodes are hidden below (+N).
covered
SelectionClick a card to select it; the api selects from code and reports the selection.
covered
Focus ModeFocus a person: collapsed ancestors open, the card is selected and panned into view.
covered
Semantic ZoomZoom out (Ctrl + wheel or the controls) and cards turn into simplified marks; zoom in for full cards.
covered
Lazy ChildrenNodes 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.
covered
Command PaletteType a name or command; Enter focuses the person or runs the command through the api.
covered
Live DataValues update every 2 s; badges and totals follow, the view stays put.
covered
Time TravelStep through yearly snapshots of the organisation; added and removed teams animate.
covered
Dark Themetheme.mode: dark with the page surface (open with ?mode=dark for the whole page).
covered
CSS ThemingRestyle cards, titles and links through their classes (wcc-tnode-card, wcc-tnode-title, wcc-tlink).
covered
AccessibilityTab into the chart and walk the hierarchy with the arrow keys.
covered-better
Localization RTLMirrored 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.
covered

Stock

BasicCandles with volume, range selector, navigator, crosshair and readout.
covered
TimeframeAggregate daily candles into weeks or months at runtime.
covered
Price ScaleLinear, logarithmic or percent-change price axis.
covered
Large Dataset20 years of daily candles (about 5 200); only the visible range is drawn, the navigator summarises all.
covered
Streaming5-minute candles; a new tick every second updates the last candle, a new candle every 5 ticks; the view follows.
covered
AnalysisSMA, EMA and Bollinger overlays plus RSI and MACD panes.
covered
ComparisonTwo more tickers rebased to the main close at the start of the view.
covered
Cross Chart SyncZoom or pan either chart; the other follows (zoomed event + api.setRange).
covered
Trading OverlaysOpt-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".
covered
Event MarkersEarnings, dividend and split flags below or above the candles, with tooltips.
covered
Data LegendThe readout shows open, high, low, close, change and volume (and overlay values) for the hovered candle.
covered
ToolbarBuilt-in range buttons plus a page toolbar driving the api (style, zoom, timeframe).
covered
ThemingUp / down colours, theme presets and dark mode.
covered
ExportExport the chart as PNG / SVG or the visible data as CSV.
covered
All Drawing ToolsEvery 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).
covered

Maps

ChoroplethBroadband adoption by country (illustrative), with a colour bar legend.
covered
BubblesCity sizes as proportional circles, with a size key.
covered
MarkersOffice pins with labels and partner sites as diamonds; markers keep their size while zooming.
covered
Hexbin6 000 sample sightings binned into screen hexagons; size and colour follow the count.
covered
PixelThe choropleth drawn as a dot (pixel) map.
covered
ArcsFlight volumes from a hub; width follows the value, dashes show direction.
covered
RoutesA 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.
covered
BasemapThe map alone: graticule, sphere and borders without data.
covered
NormalizeAbsolute counts divided by population (per million people).
covered
ProjectionsEqual Earth, Mercator, equirectangular and an orthographic globe.
covered
RegistryregisterMap() with our own GeoJSON (a fictional island with four districts), then used by name.
covered
Honeycombstyle: '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).
covered
JoinsRows keyed by ISO-2, ISO-3 or English name all join to the same regions.
covered
ExtendingInline GeoJSON (our own: a fictional campus) with a bubble layer on top, no registry needed.
covered
ScalesLinear, log, quantize, diverging and explicit ranges on the same data.
covered
PalettesNamed palettes (colorScale.palette): sequential ramps, viridis (colour-blind safe) and diverging pairs; reverse flips any of them. PG.api(c).palettes() lists the names.
covered
PatternsHatch, 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.
covered
Image FillVisited countries filled with their flags (inline SVG images; only image data URIs, http(s) or relative URLs are accepted).
covered
ThemingTheme presets and dark mode on the same map.
covered
CameraZoom to a region, zoom by a factor, reset, or rotate the globe from code.
covered
SelectionClick a country to select it; the event reports it and the api can select from code.
covered
DrilldownplotOptions.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.
covered
AnnotationsCallouts 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.
covered
A11YTab into the map; arrow keys move between regions with data, Enter selects, +/- zoom.
covered-better
ExportExport the map as PNG / SVG or the data as CSV.
covered
Albers projectionsUS states with the conic 'albers' projection and the composite 'albersUsa' (Alaska and Hawaii as insets).
covered
Named palettesThe sequential colour ramps by name: blue, green, purple, orange, red and gray (teal, heat and viridis appear on other pages).
covered

Originals: variants

Chord: sort and ribbon colourOffice-to-office travel: groups sorted 'asc' and 'desc' by size, ribbons coloured by their 'source' or 'target'.
covered
Marimekko: column sortCloud spend by region and service, columns sorted 'desc' and 'asc' by their total.
covered
Network: node size and rendererA small library dependency graph with nodes.sizeBy 'value', 'degree' and 'none', and the same graph forced to renderer 'svg' and 'canvas'.
covered
Radial column: series colours and radial labelsTwenty-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.
covered
Radial column: legend right and bottomOne 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'.
covered

Network

Incident Blast RadiusFacet 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.
covered
Facet Layout at ScaleEight 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.
covered

Control-room concepts

Nested radial cascade: four levels of one incidentOne 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.
covered
Matrix lattice: status grid linked to relation flowsA 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.
covered
Net lattice: cluster topology with anomaly badgesSix 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.
covered

Quint Timeline

Quint timeline: SaaS ops control room, 24 hFive lanes on one time axis: requests per 10 min (colour = error rate, dashed = typical day, ◆ deploys, ● pipeline runs), cost per cluster, error budget left per service (availability · p95 latency), p95 latency per service and traffic by region. Hover for one crosshair across all lanes; click a service, cluster or time slot to pin it, Esc clears.
original

Quint Convergence

Quint convergence: the 18:40 EU incidentThe same five lanes with a labelled focus lens: the time axis around the incident is magnified, values are never changed. Each lane calls out its value at the incident; the deploy right before it is marked. Press L or the lens button to switch back to a linear axis.
original
Three-lane convergence: requests, latency, regionsA compact convergence view with three lanes and a stronger lens (×6, 30 min of context on each side).
original

Medicine & practice

Ward vitals clock: 24 h from 15:00 (V2)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.
original
Practice vitals clock: 12 h, few measurementsA 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.
original
Threshold-band rings on a radialColumn (V1)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.
original
Live feed (demo): append measurements (V3)api(chart).append(id, points) adds measurements and redraws at most once a second. followNow: true advances the internal now to the newest measurement. The button sends invented values; the calling software always decides what they mean.
original
Practice day: rooms as lanes, doctor routes, conflicts6 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.
original
Practice day: staff as lanesThe same model with lanes: "people": one lane per person; an appointment with two people (doctor + assistant) shows in both lanes.
original
Board: day vertical, columns = roomsview: "board" (automatic below 560 px): time downwards, one column per room.
original
Board: week Mon–Fri × rooms304 appointments of the week, columns = days × rooms; Monday's conflicts stay marked.
original
Patient flow: stages per patient (rangeBar)schedule.flow.fromEvents(): check-in, waiting room, lab, exam, checkout per pseudonymous patient ID. Total waiting: median 19 min, P90 26.1 min (never a sum or mean).
original
Patient flow: transitions with median / P90 (sankey)The same visits as a sankey: width = patients; the tooltip shows the median and P90 duration per transition (sankeyPlugin from flow.fromEvents()).
original
Utilization per room and half hour (heatmap)schedule.utilization() with 30-min 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 ones count only the open minutes. Total: 42.3 %.
original
Utilization per day, 4 weeks (calendar)Daily values from schedule.utilization() with day buckets; weekends closed: hatched, own legend entry, tooltip “closed”.
original