# WestCoast Charts gallery

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/ · Index for agents: https://westcoast-charts.com/llms.txt

515 detailed example references. Some pages link the complete source instead of embedding a single configuration. This reference collection is separate from the [current 528-example catalogue](https://westcoast-charts.com/examples/index.md). Duplicates of another reference are left out.

The visual gallery uses the official WestCoast Charts 1.1.5 showcase: 528 live cards, including repeated examples under relevant feature categories. Source commit: 95f093ba8d388c579d9f94701d3322c728c77632.

### Free Core

MIT-licensed charts and optional features; commercial use included.

- **Chart types**: [Line](https://westcoast-charts.com/examples/#line), [Area](https://westcoast-charts.com/examples/#area), [Column](https://westcoast-charts.com/examples/#column), [Bar](https://westcoast-charts.com/examples/#bar), [Mixed / combo](https://westcoast-charts.com/examples/#mixed), [Range area](https://westcoast-charts.com/examples/#range-area), [Streamgraph](https://westcoast-charts.com/examples/#streamgraph), [Waterfall](https://westcoast-charts.com/examples/#waterfall), [Dumbbell](https://westcoast-charts.com/examples/#dumbbell), [Timeline / range bar](https://westcoast-charts.com/examples/#timeline), [Funnel](https://westcoast-charts.com/examples/#funnel), [Candlestick](https://westcoast-charts.com/examples/#candlestick), [Box plot](https://westcoast-charts.com/examples/#boxplot), [Violin](https://westcoast-charts.com/examples/#violin), [Raincloud](https://westcoast-charts.com/examples/#raincloud), [Histogram](https://westcoast-charts.com/examples/#histogram), [Bubble](https://westcoast-charts.com/examples/#bubble), [Scatter](https://westcoast-charts.com/examples/#scatter), [Heatmap](https://westcoast-charts.com/examples/#heatmap), [Treemap](https://westcoast-charts.com/examples/#treemap), [Sunburst](https://westcoast-charts.com/examples/#sunburst), [Icicle](https://westcoast-charts.com/examples/#icicle), [Unit & pictogram](https://westcoast-charts.com/examples/#unit), [Beeswarm](https://westcoast-charts.com/examples/#beeswarm), [Waffle](https://westcoast-charts.com/examples/#waffle), [Slope](https://westcoast-charts.com/examples/#slope), [Pie & donut](https://westcoast-charts.com/examples/#pie), [Radial bar](https://westcoast-charts.com/examples/#radialbar), [Gauge](https://westcoast-charts.com/examples/#gauge), [Radar](https://westcoast-charts.com/examples/#radar), [Polar area](https://westcoast-charts.com/examples/#polar-area), [Sparklines](https://westcoast-charts.com/examples/#sparklines)
- **Dashboards & interaction**: [Crossfilter dashboards](https://westcoast-charts.com/examples/#crossfilter-dashboards), [Custom series](https://westcoast-charts.com/examples/#custom-series), [Interactivity](https://westcoast-charts.com/examples/#interactivity), [Narrative & state](https://westcoast-charts.com/examples/#narrative-state), [Trellis](https://westcoast-charts.com/examples/#trellis), [Highlight filter](https://westcoast-charts.com/examples/#highlight-filter)
- **Core features**: [Drilldown](https://westcoast-charts.com/examples/#feature-drilldown), [Link & crossfilter](https://westcoast-charts.com/examples/#feature-link), [Highlight filter](https://westcoast-charts.com/examples/#feature-highlight-filter), [Perspectives](https://westcoast-charts.com/examples/#feature-perspectives), [History / rewind](https://westcoast-charts.com/examples/#feature-history), [Storyboard](https://westcoast-charts.com/examples/#feature-storyboard), [Narrative](https://westcoast-charts.com/examples/#feature-narrative), [Trellis](https://westcoast-charts.com/examples/#feature-trellis), [Canvas renderer](https://westcoast-charts.com/examples/#feature-canvas)
- **Theming**: [Themes](https://westcoast-charts.com/examples/#theming)
- **Labs**: [Type labs](https://westcoast-charts.com/examples/#type-labs)

### Premium

A separate paid extension: Premium flagships, chart types and compositions.

- **Flagships**: [Quint-Semantics: an ops day on one time axis](https://westcoast-charts.com/examples/#quint-semantics), [Medicine & practice](https://westcoast-charts.com/examples/#medizin-praxis), [Ops control rooms](https://westcoast-charts.com/examples/#control-rooms), [Facet network](https://westcoast-charts.com/examples/#network-facet)
- **Multi-semantic radial**: [Orientation](https://westcoast-charts.com/examples/#radial-orient), [Wave ring](https://westcoast-charts.com/examples/#radial-wave), [Chord inside](https://westcoast-charts.com/examples/#radial-chord), [Triple semantics](https://westcoast-charts.com/examples/#radial-triple), [Linked layers](https://westcoast-charts.com/examples/#radial-linked), [Time rings & goals](https://westcoast-charts.com/examples/#radial-time), [Radial column basics](https://westcoast-charts.com/examples/#radial-basics)
- **Chart types**: [Sankey](https://westcoast-charts.com/examples/#premium-sankey), [Gantt](https://westcoast-charts.com/examples/#premium-gantt), [Tree](https://westcoast-charts.com/examples/#premium-tree), [Stock](https://westcoast-charts.com/examples/#premium-stock), [Maps](https://westcoast-charts.com/examples/#premium-maps), [Originals: variants](https://westcoast-charts.com/examples/#premium-original-variants), [WCC originals](https://westcoast-charts.com/examples/#premium-originals)

The configuration index below preserves the website’s individual example and Markdown URLs; its entry count differs from the showcase card count.


## Line

- [Basic line](https://westcoast-charts.com/gallery/line/basic-line/index.md): One series of monthly sign-ups on a category axis.
- [Line with data labels](https://westcoast-charts.com/gallery/line/line-with-data-labels/index.md): Two temperature lines with value labels and markers.
- [Zoomable time series](https://westcoast-charts.com/gallery/line/zoomable-timeseries/index.md): Two years of daily traffic with x zoom, toolbar and a gradient area under the line.
- [Line with annotations](https://westcoast-charts.com/gallery/line/line-with-annotations/index.md): Share price with a target line, a highlighted range and point callouts.
- [Synced charts](https://westcoast-charts.com/gallery/line/syncing-charts/index.md): Three stacked charts in one group share crosshair and tooltip.
- [Brush chart](https://westcoast-charts.com/gallery/line/brush-charts/index.md): A detail chart driven by a brush selection on an overview chart.
- [Stepline](https://westcoast-charts.com/gallery/line/stepline/index.md): Price tiers that change in steps.
- [Gradient line](https://westcoast-charts.com/gallery/line/gradient-line/index.md): A line whose stroke runs through a colour gradient.
- [Line with missing data](https://westcoast-charts.com/gallery/line/line-with-missing-data/index.md): Sensor readings with gaps (null) that break the line.
- [Dashed lines](https://westcoast-charts.com/gallery/line/dashed-line/index.md): Actual, plan and forecast lines with different dash patterns.
- [Realtime](https://westcoast-charts.com/gallery/line/realtime/index.md): A line that appends a point every second and slides.
- [Large dataset, downsampled](https://westcoast-charts.com/gallery/line/line-large-dataset-downsampling/index.md): 50 000 points drawn with peak-preserving decimation.
- [Annotation tooltips](https://westcoast-charts.com/gallery/line/line-with-annotation-tooltips/index.md): Release markers on a line; hovering or focusing a marker shows what shipped (annotation wcc.tooltip).
- [Line with drilldown](https://westcoast-charts.com/gallery/line/line-with-drilldown/index.md): Click a year to drill into its months; the breadcrumb or Backspace goes back.

## Area

- [Basic area](https://westcoast-charts.com/gallery/area/basic-area/index.md): Weekly downloads as a smooth filled area.
- [Spline area](https://westcoast-charts.com/gallery/area/area-spline/index.md): Two overlapping smooth areas.
- [Datetime area](https://westcoast-charts.com/gallery/area/area-datetime/index.md): A datetime area with range buttons (1M / 6M / 1Y / All).
- [Area with negative values](https://westcoast-charts.com/gallery/area/area-with-negative/index.md): Net cash flow that crosses zero, filled to the zero line.
- [Contribution-style area](https://westcoast-charts.com/gallery/area/area-github-style/index.md): A compact activity area with a brush overview, in the style of a code-host contributions graph.
- [Stacked area](https://westcoast-charts.com/gallery/area/stacked-area/index.md): Three stacked channels over time.
- [Area with missing data](https://westcoast-charts.com/gallery/area/area-with-missing-data/index.md): Areas with null gaps.
- [Irregular time series](https://westcoast-charts.com/gallery/area/timeseries-with-irregular-data/index.md): Three series sampled at different, uneven timestamps.

## Column

- [Basic column](https://westcoast-charts.com/gallery/column/basic-column/index.md): Three products per quarter as grouped columns.
- [Column with data labels](https://westcoast-charts.com/gallery/column/column-with-data-labels/index.md): Monthly conversion rate with labels on top of each column.
- [Stacked column](https://westcoast-charts.com/gallery/column/stacked-column/index.md): Support tickets by severity, stacked with totals.
- [100% stacked column](https://westcoast-charts.com/gallery/column/stacked-column-100/index.md): Device share per month, normalised to 100%.
- [Rotated labels](https://westcoast-charts.com/gallery/column/column-with-rotated-labels/index.md): Long category names rotated to fit.
- [Column with negatives](https://westcoast-charts.com/gallery/column/column-with-negative/index.md): Monthly profit and loss, coloured by sign.
- [Dynamically loaded](https://westcoast-charts.com/gallery/column/dynamic-loaded-chart/index.md): Click a year column to load its quarters into a second chart.
- [Distributed columns](https://westcoast-charts.com/gallery/column/distributed-columns/index.md): One colour per column, legend hidden.
- [Range column](https://westcoast-charts.com/gallery/column/range-column/index.md): Floating min–max columns of daily temperatures.
- [Grouped stacked column](https://westcoast-charts.com/gallery/column/grouped-stacked-column/index.md): Budget and actual stacks side by side per quarter.
- [Column with goal markers](https://westcoast-charts.com/gallery/column/column-with-markers/index.md): Actual columns with a target marker on each.
- [Grouped axis labels](https://westcoast-charts.com/gallery/column/column-with-group-label/index.md): Months grouped under year labels on the x axis.
- [Column drilldown](https://westcoast-charts.com/gallery/column/column-with-drilldown/index.md): Click a region to see its countries, then a country to see its cities.
- [Drilldown with zoom](https://westcoast-charts.com/gallery/column/column-drilldown-zoom/index.md): Weeks drill into hours; the hourly level is a zoomable time series.
- [Async drilldown](https://westcoast-charts.com/gallery/column/column-drilldown-async/index.md): Drilling loads the next level asynchronously; a loading bar shows while it arrives.

## Bar

- [Basic bar](https://westcoast-charts.com/gallery/bar/basic-bar/index.md): Ranked horizontal bars.
- [Grouped bar](https://westcoast-charts.com/gallery/bar/grouped-bar/index.md): Two years side by side per team.
- [Stacked bar](https://westcoast-charts.com/gallery/bar/stacked-bar/index.md): Time spent per activity, stacked per person.
- [100% stacked bar](https://westcoast-charts.com/gallery/bar/stacked-bar-100/index.md): Survey answers per question as shares.
- [Population pyramid (negatives)](https://westcoast-charts.com/gallery/bar/bar-with-negative/index.md): Two-sided bars around zero with absolute labels.
- [Reversed bar](https://westcoast-charts.com/gallery/bar/reversed-bar/index.md): Bars growing from the right with the axis reversed.
- [Custom data labels](https://westcoast-charts.com/gallery/bar/bar-with-custom-data-labels/index.md): Category names written inside the bars, axis labels hidden.
- [Patterned bar](https://westcoast-charts.com/gallery/bar/patterned-bar/index.md): Stacked bars filled with line and dot patterns (print-friendly).
- [Bar with image fill](https://westcoast-charts.com/gallery/bar/bar-with-images/index.md): Bars filled with generated texture images (our own SVG tiles).
- [Bar with goal markers](https://westcoast-charts.com/gallery/bar/bar-with-markers/index.md): Horizontal bars with target ticks.
- [Grouped stacked bar](https://westcoast-charts.com/gallery/bar/grouped-stacked-bar/index.md): Two stacked groups per category, horizontal.
- [Bar chart race](https://westcoast-charts.com/gallery/bar/horizontal-bar-race/index.md): Cities re-rank month by month with a ticker.

## Mixed

- [Line and column](https://westcoast-charts.com/gallery/mixed/line-column/index.md): Revenue columns with a margin line on a second axis.
- [Multiple y axes](https://westcoast-charts.com/gallery/mixed/multiple-yaxes/index.md): Three measures with three coloured y axes.
- [Dual axes, zero aligned](https://westcoast-charts.com/gallery/mixed/multiple-yaxes-aligned-zero/index.md): Two axes with different scales whose zero lines coincide (yaxis wcc.alignZero).
- [Dual axis currency labels](https://westcoast-charts.com/gallery/mixed/dual-axis-currency-labels/index.md): Euro and US-dollar axes with compact currency labels.
- [Line and area](https://westcoast-charts.com/gallery/mixed/line-area/index.md): An area of capacity with a line of demand.
- [Line, column and area](https://westcoast-charts.com/gallery/mixed/line-column-area/index.md): Three series types combined.

## Range area

- [Basic range area](https://westcoast-charts.com/gallery/range-area/basic-range-area/index.md): Daily low–high temperature band.
- [Range band with line and forecast](https://westcoast-charts.com/gallery/range-area/range-area-line-combo/index.md): Confidence band plus median line and a dashed forecast.

## Streamgraph

- [Basic streamgraph](https://westcoast-charts.com/gallery/streamgraph/basic-streamgraph/index.md): Listening hours by genre over two years.
- [Streamgraph, expanded](https://westcoast-charts.com/gallery/streamgraph/streamgraph-expand/index.md): Share of total (0–100%) instead of absolute values.
- [Many series](https://westcoast-charts.com/gallery/streamgraph/streamgraph-many-series/index.md): Twelve product lines in one stream.
- [Conversation stream](https://westcoast-charts.com/gallery/streamgraph/streamgraph-conversation/index.md): Symmetric (silhouette) stream of topics in a community thread, with labelled bands and a story note.

## Waterfall

- [Basic waterfall](https://westcoast-charts.com/gallery/waterfall/basic-waterfall/index.md): Opening to closing cash with subtotals.
- [Horizontal waterfall](https://westcoast-charts.com/gallery/waterfall/waterfall-horizontal/index.md): A horizontal bridge with long step names.
- [Crowded currency labels](https://westcoast-charts.com/gallery/waterfall/waterfall-crowded-currency-labels/index.md): Twelve monthly steps in euros plus a total.

## Dumbbell

- [Basic dumbbell](https://westcoast-charts.com/gallery/dumbbell/basic-dumbbell/index.md): Engagement score in 2024 and 2026 per department.
- [Vertical dumbbell](https://westcoast-charts.com/gallery/dumbbell/dumbbell-column/index.md): Start and current salary per level, vertical.
- [Three measures](https://westcoast-charts.com/gallery/dumbbell/dumbbell-three-measures/index.md): Minimum, target and actual per region.

## Timeline

- [Simple timeline](https://westcoast-charts.com/gallery/timeline/simple/index.md): Project phases on a date axis.
- [Grouped rows](https://westcoast-charts.com/gallery/timeline/multi-series-group-rows/index.md): Several people per row, coloured by role (rangeBarGroupRows).
- [Multi-series timeline](https://westcoast-charts.com/gallery/timeline/multi-series/index.md): Planned and actual bars per task.
- [Advanced timeline](https://westcoast-charts.com/gallery/timeline/advanced/index.md): Overlapping bars with data labels showing durations.
- [Per-bar colours](https://westcoast-charts.com/gallery/timeline/controlling-colors/index.md): Each bar picks its own colour (fillColor).

## Funnel

- [Funnel](https://westcoast-charts.com/gallery/funnel/funnel/index.md): Sales funnel from visit to purchase.
- [Pyramid](https://westcoast-charts.com/gallery/funnel/pyramid/index.md): Tier pyramid with heights proportional to value.
- [Tapered trapezoid funnel](https://westcoast-charts.com/gallery/funnel/trapezoid-funnel-tapered/index.md): Smooth trapezoid stages with conversion rates.

## Candlestick

- [Basic candlestick](https://westcoast-charts.com/gallery/candlestick/basic/index.md): Sixty trading days of a fictional stock.
- [Candles with volume brush](https://westcoast-charts.com/gallery/candlestick/candlestick-bar/index.md): Candles on top, volume bars below acting as a brush.
- [Candles on a category axis](https://westcoast-charts.com/gallery/candlestick/candlestick-category/index.md): Weekly candles labelled by week, no time gaps.
- [Candles with moving average](https://westcoast-charts.com/gallery/candlestick/candlestick-line/index.md): Candles plus a 10-day moving-average line.

## Boxplot

- [Basic box plot](https://westcoast-charts.com/gallery/boxplot/basic/index.md): Delivery time per carrier.
- [Box plot with outliers](https://westcoast-charts.com/gallery/boxplot/boxplot-scatter/index.md): Boxes plus outliers drawn as a scatter series.
- [Horizontal box plot](https://westcoast-charts.com/gallery/boxplot/horizontal-boxplot/index.md): Page load time per page type, horizontal.
- [Box plot with points](https://westcoast-charts.com/gallery/boxplot/boxplot-with-points/index.md): Boxes with every observation drawn on top, spread by a deterministic jitter (boxPlot wcc.jitter).
- [Horizontal box plot with points](https://westcoast-charts.com/gallery/boxplot/horizontal-boxplot-with-points/index.md): Horizontal boxes with jittered observations (raincloud form).
- [From raw observations](https://westcoast-charts.com/gallery/boxplot/boxplot-from-raw-observations/index.md): Quartiles computed from raw samples; resample to update.
- [Same box, different data](https://westcoast-charts.com/gallery/boxplot/same-box-different-data/index.md): Two samples with an identical box summary but different shapes, shown as boxes and as unit dots.

## Violin

- [Basic violin](https://westcoast-charts.com/gallery/violin/basic-violin/index.md): Response time per service with inner boxes.
- [Violin with jitter](https://westcoast-charts.com/gallery/violin/violin-with-jitter/index.md): Densities with every observation jittered on top.
- [Horizontal violin](https://westcoast-charts.com/gallery/violin/horizontal-violin/index.md): Order value per region, horizontal.
- [Bimodal, horizontal](https://westcoast-charts.com/gallery/violin/horizontal-bimodal/index.md): Two-peaked commute times show up as double bulges.
- [Colour-graded jitter](https://westcoast-charts.com/gallery/violin/colored-jitter/index.md): Points coloured on a red–amber–green scale by value.
- [Violin ⇄ swarm morph](https://westcoast-charts.com/gallery/violin/violin-to-jitter-morph/index.md): Toggle between density shapes and individual points.

## Raincloud

- [Basic raincloud](https://westcoast-charts.com/gallery/raincloud/basic-raincloud/index.md): Time to first value per onboarding flow.
- [Cloud and rain](https://westcoast-charts.com/gallery/raincloud/cloud-and-rain/index.md): Dense sample with small square drops.
- [Horizontal raincloud](https://westcoast-charts.com/gallery/raincloud/horizontal-raincloud/index.md): Cloud above, rain below, one colour per group.
- [Raincloud variations](https://westcoast-charts.com/gallery/raincloud/raincloud-variations/index.md): Switch between four layouts of the same data.

## Histogram

- [Latency distribution](https://westcoast-charts.com/gallery/histogram/latency-distribution/index.md): 1 000 request latencies binned automatically.
- [Comparing distributions](https://westcoast-charts.com/gallery/histogram/comparing-distributions/index.md): Two overlaid, normalised histograms.
- [Explode to observations](https://westcoast-charts.com/gallery/histogram/explode-to-observations/index.md): Bars break apart into the individual observations.

## Bubble

- [Simple bubble](https://westcoast-charts.com/gallery/bubble/simple-bubble/index.md): Three product groups by price, rating and sales.
- [Shaded bubble](https://westcoast-charts.com/gallery/bubble/3d-bubble/index.md): Bubbles with a radial gradient for a spherical look.

## Scatter

- [Basic scatter](https://westcoast-charts.com/gallery/scatter/scatter-basic/index.md): Height against weight for three groups.
- [Datetime scatter](https://westcoast-charts.com/gallery/scatter/scatter-datetime/index.md): Incidents over time by severity.
- [Image markers](https://westcoast-charts.com/gallery/scatter/scatter-images/index.md): Scatter points drawn as our own generated icon images.
- [Scatter with jitter](https://westcoast-charts.com/gallery/scatter/scatter-with-jitter/index.md): Discrete ratings jittered so overlapping points stay visible.
- [Large scatter](https://westcoast-charts.com/gallery/scatter/scatter-canvas-renderer/index.md): 60 000 points on canvas with xy zoom.

## Heatmap

- [Basic heatmap](https://westcoast-charts.com/gallery/heatmap/basic/index.md): Orders by weekday and hour.
- [One colour per row](https://westcoast-charts.com/gallery/heatmap/multiple-color/index.md): Each metric row gets its own colour ramp.
- [Colour ranges](https://westcoast-charts.com/gallery/heatmap/color-range/index.md): Named value ranges with their own colours, negatives included.
- [Gradient legend](https://westcoast-charts.com/gallery/heatmap/gradient-legend/index.md): A continuous colour scale with a gradient legend bar.
- [Round cells](https://westcoast-charts.com/gallery/heatmap/rounded/index.md): Circular cells with value labels.
- [Honeycomb](https://westcoast-charts.com/gallery/heatmap/honeycomb/index.md): Hexagonal cells in offset rows.
- [Heatmap drilldown](https://westcoast-charts.com/gallery/heatmap/heatmap-with-drilldown/index.md): Click a week/day cell to see its hours.
- [Continuous time heatmap](https://westcoast-charts.com/gallery/heatmap/continuous-datetime/index.md): Load per 15-minute bucket across a day for several servers, on a datetime x axis with centred labels (heatmap wcc.centerTimeLabels).
- [Calendar heatmap](https://westcoast-charts.com/gallery/heatmap/calendar-heatmap/index.md): A year of daily commits in a contribution calendar.
- [Dense heatmap](https://westcoast-charts.com/gallery/heatmap/heatmap-canvas-renderer/index.md): A 60 × 100 matrix.

## Treemap

- [Basic treemap](https://westcoast-charts.com/gallery/treemap/basic/index.md): Cloud spend by service.
- [Multi-series treemap](https://westcoast-charts.com/gallery/treemap/multi-dimensional/index.md): Two series laid out as groups.
- [Colour scale](https://westcoast-charts.com/gallery/treemap/color-scale/index.md): Tiles coloured by change, red to green.
- [Distributed treemap](https://westcoast-charts.com/gallery/treemap/distributed/index.md): One colour per tile.
- [Treemap drilldown](https://westcoast-charts.com/gallery/treemap/treemap-with-drilldown/index.md): Click a group to zoom in; the breadcrumb returns.
- [Nested market map](https://westcoast-charts.com/gallery/treemap/nested-market-map/index.md): Sectors and companies sized by market cap, coloured by daily change, dark-friendly.
- [Treemap ⇄ sunburst morph](https://westcoast-charts.com/gallery/treemap/treemap-sunburst-morph/index.md): The same hierarchy animates between treemap and sunburst.

## Sunburst

- [Basic sunburst](https://westcoast-charts.com/gallery/sunburst/basic/index.md): Budget by division, team and line item.
- [From a drilldown config](https://westcoast-charts.com/gallery/sunburst/from-drilldown/index.md): Rings built from drilldown references instead of nested data.
- [Semi-circle sunburst](https://westcoast-charts.com/gallery/sunburst/semi-circle/index.md): Half-circle rings for a compact header chart.

## Icicle

- [Basic icicle](https://westcoast-charts.com/gallery/icicle/basic/index.md): Headcount by org level; click to zoom.
- [Flame graph](https://westcoast-charts.com/gallery/icicle/flame-graph/index.md): CPU samples as an upward flame graph.
- [Vertical labels](https://westcoast-charts.com/gallery/icicle/vertical-labels/index.md): Narrow tiles with rotated labels.
- [From a drilldown config](https://westcoast-charts.com/gallery/icicle/from-drilldown/index.md): Partition built from drilldown references, laid out left to right.

## Unit

- [Pictogram population](https://westcoast-charts.com/gallery/unit/pictogram-population/index.md): People pictograms, one figure = 1 million residents.
- [Parliament](https://westcoast-charts.com/gallery/unit/parliament/index.md): A hemicycle of 300 seats; parties are contiguous wedges.
- [Workforce clusters](https://westcoast-charts.com/gallery/unit/workforce-clusters/index.md): One sunflower cluster per department with external labels.
- [Population explorer](https://westcoast-charts.com/gallery/unit/population-explorer/index.md): Switch the grouping; the same marks fly to their new clusters.
- [City bubbles](https://westcoast-charts.com/gallery/unit/city-bubbles/index.md): Each city is one mark sized by population, packed by region.
- [Heart donors](https://westcoast-charts.com/gallery/unit/heart-donors/index.md): Donors fill a heart outline from the bottom up.
- [Globe population](https://westcoast-charts.com/gallery/unit/globe-population/index.md): Units arranged in a globe outline.
- [Pictogram crowd](https://westcoast-charts.com/gallery/unit/pictogram-crowd/index.md): A packed crowd of 500 figures, minority in the centre.
- [Logo-shaped story](https://westcoast-charts.com/gallery/unit/brand-logo-story/index.md): Customers re-form from clusters into a brand mark (our own wave logo).
- [Shape forge](https://westcoast-charts.com/gallery/unit/logo-forge/index.md): Pick an outline; the same marks re-form into it.
- [Pipeline stages](https://westcoast-charts.com/gallery/unit/pipeline-stages/index.md): Deals stacked as columns per stage.
- [Review ratings](https://westcoast-charts.com/gallery/unit/review-ratings/index.md): Star pictograms per rating, one star = 10 reviews.
- [Response times](https://westcoast-charts.com/gallery/unit/response-times/index.md): Each ticket is a dot on a real time axis, swarmed per channel.
- [Battery storage](https://westcoast-charts.com/gallery/unit/battery-storage/index.md): Storage capacity fills a battery outline.
- [Bring your own shape](https://westcoast-charts.com/gallery/unit/bring-your-own-shape/index.md): A mountain outline drawn from plain coordinates with shapeFrom().
- [Silhouette gallery](https://westcoast-charts.com/gallery/unit/silhouette-gallery/index.md): Every outline in the WCC shapes kit, filled with 120 marks.
- [House tenure](https://westcoast-charts.com/gallery/unit/house-tenure/index.md): Households inside a house outline.
- [Human workforce](https://westcoast-charts.com/gallery/unit/human-workforce/index.md): Staff fill a person silhouette.
- [Tree canopy](https://westcoast-charts.com/gallery/unit/tree-canopy/index.md): Street trees by species fill a tree outline.
- [Solar generation](https://westcoast-charts.com/gallery/unit/solar-generation/index.md): Monthly output as a bolt-shaped unit chart.
- [Water silhouette](https://westcoast-charts.com/gallery/unit/water-silhouette/index.md): Water use fills a drop.
- [Flight cabins](https://westcoast-charts.com/gallery/unit/flight-cabins/index.md): Seats by cabin, nose to tail, inside a plane outline.
- [Rocket payloads](https://westcoast-charts.com/gallery/unit/rocket-payloads/index.md): Payload mass by customer inside a rocket.
- [Shield security](https://westcoast-charts.com/gallery/unit/shield-security/index.md): Blocked threats fill a shield.
- [Support automation](https://westcoast-charts.com/gallery/unit/support-automation/index.md): Tickets move between human and bot handling as automation rolls out.
- [Store locations](https://westcoast-charts.com/gallery/unit/store-locations/index.md): Stores as house marks on real x/y coordinates, coloured by format.
- [Target conversion](https://westcoast-charts.com/gallery/unit/target-conversion/index.md): Visitors fill a target from the centre out; converters sit in the bull.
- [Pyramid hierarchy](https://westcoast-charts.com/gallery/unit/pyramid-hierarchy/index.md): Staff by level in a pyramid outline, juniors at the base.
- [Compliance checks](https://westcoast-charts.com/gallery/unit/compliance-checks/index.md): A waffle of 100 checks with stroke-only tick pictograms (pictogram outline).
- [Connection types](https://westcoast-charts.com/gallery/unit/connection-types/index.md): One mini waffle per connection type (of 100 homes).
- [Startup funding](https://westcoast-charts.com/gallery/unit/startup-funding/index.md): Each startup is a bubble sized by funding, packed and coloured by stage.
- [Team roster](https://westcoast-charts.com/gallery/unit/team-roster/index.md): One named mark per person; hover shows who.
- [Marathon storyboard](https://westcoast-charts.com/gallery/unit/marathon-storyboard/index.md): Play a race story (start, halfway, finish); the marks regroup per frame, with transport, scrubber and captions.

## Beeswarm

- [Life expectancy swarm](https://westcoast-charts.com/gallery/beeswarm/life-expectancy-swarm/index.md): One dot per country, swarmed by continent, horizontal.
- [Body mass by species](https://westcoast-charts.com/gallery/beeswarm/body-mass-by-species/index.md): Vertical swarms per species with a median tick.
- [Salary by department](https://westcoast-charts.com/gallery/beeswarm/salary-by-department/index.md): Dots coloured by value on a continuous scale.
- [Game scores, sized](https://westcoast-charts.com/gallery/beeswarm/game-scores-bubble/index.md): Matches per game mode, x = score, bubble = players.

## Waffle

- [Energy mix](https://westcoast-charts.com/gallery/waffle/energy-mix/index.md): 100 cells, one per percent of generation.
- [Urban small multiples](https://westcoast-charts.com/gallery/waffle/urban-small-multiples/index.md): One mini waffle per measure, out of 100 residents.

## Slope

- [Basic slope](https://westcoast-charts.com/gallery/slope/basic/index.md): Satisfaction per product area, 2025 vs 2026.
- [Multi group](https://westcoast-charts.com/gallery/slope/multi-group/index.md): Three periods with two highlighted regions.

## Pie

- [Simple pie](https://westcoast-charts.com/gallery/pie/simple-pie/index.md): Traffic share by channel.
- [Simple donut](https://westcoast-charts.com/gallery/pie/simple-donut/index.md): Donut with total in the hole.
- [Rounded donut](https://westcoast-charts.com/gallery/pie/rounded-donut/index.md): Round caps on donut segments.
- [Rounded, spaced](https://westcoast-charts.com/gallery/pie/rounded-spaced/index.md): Segments with parallel gaps and rounded corners (pie wcc.segmentGap / segmentRadius).
- [Monochrome pie](https://westcoast-charts.com/gallery/pie/monochrome-pie/index.md): Shades of one colour.
- [Gradient donut](https://westcoast-charts.com/gallery/pie/gradient-donut/index.md): Gradient-filled segments.
- [Pattern donut](https://westcoast-charts.com/gallery/pie/donut-with-pattern/index.md): Pattern fills, readable without colour.
- [Donut update](https://westcoast-charts.com/gallery/pie/donut-update/index.md): Buttons add, remove and randomise segments.
- [Pie with image fills](https://westcoast-charts.com/gallery/pie/pie-with-image/index.md): Each slice filled with our own small SVG pattern tile.
- [Donut drilldown](https://westcoast-charts.com/gallery/pie/donut-with-drilldown/index.md): Click a slice to see its breakdown; the breadcrumb goes back.

## Radial bar

- [Circle chart](https://westcoast-charts.com/gallery/radialbar/circle-chart/index.md): One ring with the value in the centre.
- [Multiple rings](https://westcoast-charts.com/gallery/radialbar/circle-chart-multiple/index.md): Four rings with a total.
- [Custom angle](https://westcoast-charts.com/gallery/radialbar/circle-custom-angle/index.md): A 270° sweep with the legend beside the ring starts.
- [Gradient ring](https://westcoast-charts.com/gallery/radialbar/circle-gradient/index.md): Gradient fill along the ring.
- [Stroked gauge](https://westcoast-charts.com/gallery/radialbar/stroked-gauge/index.md): A dashed 270° gauge.
- [Semi circle](https://westcoast-charts.com/gallery/radialbar/semi-circle-chart/index.md): Half ring.
- [Ring with icon](https://westcoast-charts.com/gallery/radialbar/circle-chart-with-image/index.md): Our own icon in the centre of the ring.

## Gauge

- [Basic gauge](https://westcoast-charts.com/gallery/gauge/basic-gauge/index.md): Arc gauge on a 0–100 domain.
- [Bands](https://westcoast-charts.com/gallery/gauge/gauge-with-bands/index.md): Threshold bands with gaps.
- [Custom label](https://westcoast-charts.com/gallery/gauge/gauge-with-custom-label/index.md): Custom domain with a formatted centre label.
- [Ticks](https://westcoast-charts.com/gallery/gauge/gauge-with-ticks/index.md): Major and minor ticks with labels.
- [Needle gauge](https://westcoast-charts.com/gallery/gauge/needle-gauge/index.md): Pointer with bands as track.
- [Live needle](https://westcoast-charts.com/gallery/gauge/live-needle-gauge/index.md): The needle follows a live value; no overshoot on updates.
- [Semi circle gauge](https://westcoast-charts.com/gallery/gauge/semi-circle-gauge/index.md): Half dial with a below-zero domain.

## Radar

- [Basic radar](https://westcoast-charts.com/gallery/radar/basic-radar/index.md): One profile across six skills.
- [Multiple series](https://westcoast-charts.com/gallery/radar/radar-multiple-series/index.md): Three car models compared.
- [Polygon fill](https://westcoast-charts.com/gallery/radar/radar-with-polygon-fill/index.md): Alternating polygon background bands.

## Polar area

- [Basic polar area](https://westcoast-charts.com/gallery/polar-area/basic-polar-area/index.md): Wind frequency by direction.
- [Monochrome polar area](https://westcoast-charts.com/gallery/polar-area/polar-area-monochrome/index.md): Shades of one colour.

## Sparklines

- [Sparkline tiles](https://westcoast-charts.com/gallery/sparklines/basic/index.md): KPI tiles with line, area and bar sparklines.

## Dashboards

- [Sales analytics](https://westcoast-charts.com/gallery/dashboards/sales-analytics-dashboard/index.md): KPIs, revenue trend, channel mix and top products.
- [Dark mode dashboard](https://westcoast-charts.com/gallery/dashboards/dark-mode-dashboard/index.md): An operations dashboard designed for dark mode.
- [Web analytics](https://westcoast-charts.com/gallery/dashboards/web-analytics-dashboard/index.md): Visitors, sources, devices, pages and a sparkline row.
- [Realtime monitoring](https://westcoast-charts.com/gallery/dashboards/realtime-monitoring-dashboard/index.md): Live streams update every second; gauges follow.

## Custom series

- [Bullet](https://westcoast-charts.com/gallery/custom-series/bullet/index.md): Actual bars against target ticks and qualitative ranges.
- [Lollipop](https://westcoast-charts.com/gallery/custom-series/lollipop/index.md): Thin stems with round heads (bar wcc.mark: lollipop).
- [Ring stem](https://westcoast-charts.com/gallery/custom-series/ring-stem/index.md): Stems topped with hollow rings, here horizontal (bar wcc.mark: ringStem).

## Interactivity

- [Crossfilter dashboard](https://westcoast-charts.com/gallery/interactivity/crossfilter-dashboard/index.md): Brush a date range on the timeline; the region and product charts refilter, and clicking a bar filters the others too.
- [Crossfilter categorical](https://westcoast-charts.com/gallery/interactivity/crossfilter-categorical/index.md): Click a region, a product or a channel; the other charts show only the matching records. Shift-click adds to the selection.
- [Measure ruler](https://westcoast-charts.com/gallery/interactivity/measure-ruler/index.md): Click two points to measure the change between them.
- [Annotation authoring](https://westcoast-charts.com/gallery/interactivity/annotation-authoring/index.md): Click the chart to pin notes; remove the last one.

## Narrative state

- [Scrollytelling](https://westcoast-charts.com/gallery/narrative-state/scrollytelling/index.md): Scroll the story; the sticky chart zooms and annotates per step, with dot navigation.
- [Shareable views](https://westcoast-charts.com/gallery/narrative-state/shareable-views/index.md): Named views set the zoom window and hidden series; the current view becomes a share token, and a link with the token restores it.
- [Undo / redo](https://westcoast-charts.com/gallery/narrative-state/undo-redo/index.md): Zoom, hide series or load new data, then step back with the toolbar, the buttons or Ctrl/Cmd+Z.

## Trellis

- [Revenue by region](https://westcoast-charts.com/gallery/trellis/revenue-by-region/index.md): One area panel per region on a shared y scale, synced crosshair, latest value in each header.
- [Department by quarter](https://westcoast-charts.com/gallery/trellis/department-by-quarter/index.md): Tidy rows (department, quarter, spend) become one column panel per department.
- [Stock performance grid](https://westcoast-charts.com/gallery/trellis/stock-performance-grid/index.md): Nine tickers on independent scales; a panel() hook colours each green or red by its change.
- [Distribution by cohort](https://westcoast-charts.com/gallery/trellis/distribution-by-cohort/index.md): Session-length histograms per signup cohort; the plugin gives every panel the same bins.
- [KPI gauge grid](https://westcoast-charts.com/gallery/trellis/kpi-gauge-grid/index.md): Eight gauges from one definition, sharing the same bands.
- [Clinical reference bands](https://westcoast-charts.com/gallery/trellis/clinical-reference-bands/index.md): Lab values over 14 days; each panel shades its own normal range with scoped annotations.
- [Panel promotion](https://westcoast-charts.com/gallery/trellis/panel-promotion/index.md): Click a panel header to expand it; Esc or the header again restores the grid.
- [Metrics by unit](https://westcoast-charts.com/gallery/trellis/metrics-by-unit/index.md): Six sensors with their own units: independent y scales and per-panel formatters.
- [Top and bottom markets](https://westcoast-charts.com/gallery/trellis/top-and-bottom-markets/index.md): The three best and three worst markets by growth, via an explicit panel order.
- [Traffic by country](https://westcoast-charts.com/gallery/trellis/traffic-by-country/index.md): 100 % stacked device split per country, one shared legend for all panels.
- [Activity by location](https://westcoast-charts.com/gallery/trellis/activity-by-location/index.md): Weekday × hour heatmaps per office on one shared colour scale.
- [IoT device health](https://westcoast-charts.com/gallery/trellis/iot-device-health/index.md): Battery per device; panel() turns a panel red and the header flags it when it ends below 70 %.
- [Task mix by team](https://westcoast-charts.com/gallery/trellis/task-mix-by-team/index.md): Task type split (Feature, Bug, Chore, Research) per team as donut panels with the same colour order.
- [Trellis lab](https://westcoast-charts.com/gallery/trellis/overview/index.md): The trellis plugin: by, row × column grids, shared scales, promotion.

## Highlight & filter

- [Filter by dashboard](https://westcoast-charts.com/gallery/highlight-filter/filter-by-dashboard/index.md): Pick a sales channel; all three charts show how much of each total came through it, against the faded whole.
- [Column highlight](https://westcoast-charts.com/gallery/highlight-filter/column-highlight/index.md): Hovering a column dims the others; click keeps the selection.
- [Stacked highlight](https://westcoast-charts.com/gallery/highlight-filter/stacked-highlight/index.md): Legend hover highlights one stack layer.
- [Line highlight](https://westcoast-charts.com/gallery/highlight-filter/line-highlight/index.md): Hover a legend entry or line; the rest fade.
- [Area highlight](https://westcoast-charts.com/gallery/highlight-filter/area-highlight/index.md): Legend hover highlights one area.
- [Funnel highlight](https://westcoast-charts.com/gallery/highlight-filter/funnel-highlight/index.md): Each stage shows the paid-campaign share of its users inside the whole stage.
- [Pie highlight](https://westcoast-charts.com/gallery/highlight-filter/pie-highlight/index.md): Hover or click a slice: it lifts out and the others dim.
- [Gauge highlight](https://westcoast-charts.com/gallery/highlight-filter/gauge-highlight/index.md): Each ring shows the night shift's part of the plant figure; switch shifts with the buttons.
- [Treemap highlight](https://westcoast-charts.com/gallery/highlight-filter/treemap-highlight/index.md): Each store tile shows its online part inside the faded whole; switch the measure with the buttons.
- [Forecast highlight](https://westcoast-charts.com/gallery/highlight-filter/forecast-highlight/index.md): Forecast points are dashed and shaded apart from actuals.
- [Bar highlight](https://westcoast-charts.com/gallery/highlight-filter/bar-highlight/index.md): Hover a bar to darken it; others stay put.
- [Highlight filter lab](https://westcoast-charts.com/gallery/highlight-filter/overview/index.md): The highlight-filter plugin on every supported type.

## Radial Column

- [Spectrum ring](https://westcoast-charts.com/gallery/radial-column/spectrum/index.md) (premium): 120 thin bars around a full ring, coloured cyan to orange by angle; the centre shows the total.
- [Nested donut + spectrum ring](https://westcoast-charts.com/gallery/radial-column/nested/index.md) (premium): A nested donut (last week inside, this week outside) in the centre of a spectrum column ring.
- [Sunburst + column ring](https://westcoast-charts.com/gallery/radial-column/sunburst/index.md) (premium): Quarters and months as a sunburst; hovering a quarter highlights its three months on the outer ring.
- [Three inner layers](https://westcoast-charts.com/gallery/radial-column/layers/index.md) (premium): Pie, donut and nested donut inside one column ring; every layer has its own legend entries, tooltip and keyboard group (PageDown).
- [Gauge arc with targets](https://westcoast-charts.com/gallery/radial-column/gauge/index.md) (premium): A 250° partial ring with slot tracks and three gauge arcs inside.
- [Stacked series](https://westcoast-charts.com/gallery/radial-column/stacked/index.md) (premium): Three series stacked outward per hour.
- [Grouped series](https://westcoast-charts.com/gallery/radial-column/grouped/index.md) (premium): Three series side by side in each month.
- [Negative values](https://westcoast-charts.com/gallery/radial-column/negative/index.md) (premium): Net change per hour: losses grow inward from the zero ring, coloured by value.
- [Live update (360 bars)](https://westcoast-charts.com/gallery/radial-column/live/index.md) (premium): 360 bars and a donut that update every 1.2 s; bars and segments morph from what is on screen.
- [Day parts aligned to a 24 h ring](https://westcoast-charts.com/gallery/radial-column/multi-dayparts/index.md) (premium): 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 year: Quarter › Month inside 365 days](https://westcoast-charts.com/gallery/radial-column/multi-year/index.md) (premium): 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).
- [Independent: channel mix + hourly load](https://westcoast-charts.com/gallery/radial-column/multi-channel/index.md) (premium): 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.
- [Region › Country with products (explicit map)](https://westcoast-charts.com/gallery/radial-column/multi-drill/index.md) (premium): 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.
- [Ops clock: incidents by hour and kind](https://westcoast-charts.com/gallery/radial-column/multi-clock/index.md) (premium): 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.
- [Link modes: none / category / angle / map](https://westcoast-charts.com/gallery/radial-column/multi-modes/index.md) (premium): 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).
- [Triple semantics: 24 h API traffic](https://westcoast-charts.com/gallery/radial-column/triple-api/index.md) (premium): 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.
- [Triple semantics: a retail year](https://westcoast-charts.com/gallery/radial-column/triple-retail/index.md) (premium): 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.
- [Triple semantics: load, price and change](https://westcoast-charts.com/gallery/radial-column/triple-energy/index.md) (premium): 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.
- [Quad semantics: SaaS ops control room, 24 h](https://westcoast-charts.com/gallery/radial-column/saas-ops-quad/index.md) (premium): 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.
- [Matrix core: service calls inside error budgets and latency](https://westcoast-charts.com/gallery/radial-column/matrix-mesh/index.md) (premium): 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.
- [Matrix core: health checks, owners and 14 days of alerts](https://westcoast-charts.com/gallery/radial-column/matrix-checks/index.md) (premium): 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).
- [Chord inside: freight lanes between six regions](https://westcoast-charts.com/gallery/radial-column/chord-trade/index.md) (premium): 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.
- [Ticket handoffs between teams, agents around](https://westcoast-charts.com/gallery/radial-column/chord-handoffs/index.md) (premium): 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.
- [Service mesh: calls, ownership and cost in one ring](https://westcoast-charts.com/gallery/radial-column/chord-mesh/index.md) (premium): 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.
- [Time ring: a week of chats, hour by hour](https://westcoast-charts.com/gallery/radial-column/heat-week/index.md) (premium): 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.
- [Team goals: seven rings inside a month of output](https://westcoast-charts.com/gallery/radial-column/goals-team/index.md) (premium): 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.
- [Server load live: gauge now, ring = last 60 minutes](https://westcoast-charts.com/gallery/radial-column/gauge-live/index.md) (premium): 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).
- [Wave ring: a week of cluster load cycles](https://westcoast-charts.com/gallery/radial-column/wave-clusters/index.md) (premium): 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.
- [Wave ring: the seasonal cycle of a typical day](https://westcoast-charts.com/gallery/radial-column/wave-energy/index.md) (premium): 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.
- [Quint semantics on a clock: SaaS ops, 24 h](https://westcoast-charts.com/gallery/radial-column/quint-radial/index.md) (premium): 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.
- [Orientation: the SaaS clock turned to the evening incident](https://westcoast-charts.com/gallery/radial-column/orient-quint/index.md) (premium): 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.
- [Orientation: goal rings turned to the second half of the month](https://westcoast-charts.com/gallery/radial-column/orient-goals/index.md) (premium): 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.

## Sankey

- [Basic Sankey](https://westcoast-charts.com/gallery/sankey/basic-sankey/index.md) (premium): Where a household budget goes: income sources into spending categories.
- [Vertical Sankey](https://westcoast-charts.com/gallery/sankey/vertical-sankey/index.md) (premium): The same kind of flow drawn top to bottom: a yearly budget split into teams.
- [Circular Sankey](https://westcoast-charts.com/gallery/sankey/circular-sankey/index.md) (premium): A material loop: recycled material flows back into production.
- [Alluvial](https://westcoast-charts.com/gallery/sankey/alluvial/index.md) (premium): Plan changes across three yearly snapshots; stage labels above the columns.
- [Chord](https://westcoast-charts.com/gallery/sankey/chord/index.md) (premium): Customers switching between plans in a quarter, as a directed chord diagram (the chord type of the premium plugin).
- [Alternate Node](https://westcoast-charts.com/gallery/sankey/alternate-node/index.md) (premium): Node alignment: justify, left, right and centre - switch with the buttons.
- [Node Overlapping](https://westcoast-charts.com/gallery/sankey/node-overlapping/index.md) (premium): Thirty small sources into five buckets: nodes and labels stay apart.
- [Data Update](https://westcoast-charts.com/gallery/sankey/data-update/index.md) (premium): New values every 2.5 s; nodes and links glide to their new size.
- [Data Morph](https://westcoast-charts.com/gallery/sankey/data-morph/index.md) (premium): Switch between two different structures; shared nodes morph, new ones fade in.
- [Particle Flow](https://westcoast-charts.com/gallery/sankey/particle-flow/index.md) (premium): Particles travel along each link; their density follows the flow.
- [Playback](https://westcoast-charts.com/gallery/sankey/playback/index.md) (premium): Quarterly frames with play / pause and a scrubber built in.
- [Path Highlight](https://westcoast-charts.com/gallery/sankey/path-highlight/index.md) (premium): Hover a node or link to trace its path; the buttons highlight from code via the premium api.
- [Draggable Nodes](https://westcoast-charts.com/gallery/sankey/draggable-nodes/index.md) (premium): Drag a node up or down; links follow and the position survives updates. nodeMove reports the offset.
- [Drill Down](https://westcoast-charts.com/gallery/sankey/drill-down/index.md) (premium): 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.
- [Comparison](https://westcoast-charts.com/gallery/sankey/comparison/index.md) (premium): Two years side by side with the same node colours.
- [Node Customization](https://westcoast-charts.com/gallery/sankey/node-customization/index.md) (premium): Per-node colours, wider nodes, rounded corners and label formatting.
- [Edge Options](https://westcoast-charts.com/gallery/sankey/edge-options/index.md) (premium): Link colour modes (gradient, source, target, fixed), opacity and curvature.
- [Themes](https://westcoast-charts.com/gallery/sankey/themes/index.md) (premium): The same diagram in the theme presets, light and dark.
- [CSS Theming](https://westcoast-charts.com/gallery/sankey/css-theming/index.md) (premium): Nodes, links and labels carry stable classes (wcc-node, wcc-link, wcc-label) for CSS overrides.
- [Custom Fonts](https://westcoast-charts.com/gallery/sankey/custom-fonts/index.md) (premium): chart.fontFamily and label font size / weight.
- [Plugins](https://westcoast-charts.com/gallery/sankey/plugins/index.md) (premium): 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).
- [Localization RTL](https://westcoast-charts.com/gallery/sankey/localization-rtl/index.md) (premium): Mirrored layout on a dir="rtl" page: the flow runs right to left, labels sit on the mirrored side, Arabic numbers.
- [Node alignment](https://westcoast-charts.com/gallery/sankey/node-alignment/index.md) (premium): One energy flow with nodeAlign 'left', 'center' and 'right': where nodes without further outflow settle; labels drawn outside the columns.

## Gantt

- [Basic Gantt](https://westcoast-charts.com/gallery/gantt/basic-gantt/index.md) (premium): A product launch plan: groups, progress, dependencies, a today line and a task grid.
- [Data Parsing](https://westcoast-charts.com/gallery/gantt/data-parsing/index.md) (premium): Tasks given as start / end ISO strings and comma-separated dependencies are parsed as is.
- [Milestones](https://westcoast-charts.com/gallery/gantt/milestones/index.md) (premium): Zero-length tasks (or milestone: true) draw as diamonds and can be dependency targets.
- [Baseline](https://westcoast-charts.com/gallery/gantt/baseline/index.md) (premium): 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.
- [Critical Path](https://westcoast-charts.com/gallery/gantt/critical-path/index.md) (premium): The longest dependency chain to the launch is computed and highlighted.
- [Rollups](https://westcoast-charts.com/gallery/gantt/rollups/index.md) (premium): 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.
- [Split Tasks](https://westcoast-charts.com/gallery/gantt/split-tasks/index.md) (premium): 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.
- [Working Calendar](https://westcoast-charts.com/gallery/gantt/working-calendar/index.md) (premium): 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.
- [Project Boundary](https://westcoast-charts.com/gallery/gantt/project-boundary/index.md) (premium): 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.
- [Dependency Types](https://westcoast-charts.com/gallery/gantt/dependency-types/index.md) (premium): 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).
- [Dependency Arrows](https://westcoast-charts.com/gallery/gantt/dependency-arrows/index.md) (premium): Arrow routing with many crossings, arrow size and colour.
- [Dependency Edit](https://westcoast-charts.com/gallery/gantt/dependency-edit/index.md) (premium): 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.
- [Task List Columns](https://westcoast-charts.com/gallery/gantt/task-list-columns/index.md) (premium): 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.
- [Custom Columns](https://westcoast-charts.com/gallery/gantt/custom-columns/index.md) (premium): 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.
- [Extended Columns](https://westcoast-charts.com/gallery/gantt/extended-columns/index.md) (premium): 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.
- [WBS Column](https://westcoast-charts.com/gallery/gantt/wbs-column/index.md) (premium): 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.
- [Progress Ring Column](https://westcoast-charts.com/gallery/gantt/progress-ring-column/index.md) (premium): 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.
- [Selection](https://westcoast-charts.com/gallery/gantt/selection/index.md) (premium): Click to select, Ctrl / Shift-click for more; the selection is reported and settable via the api.
- [Task CRUD](https://westcoast-charts.com/gallery/gantt/task-crud/index.md) (premium): 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.
- [Draw Task](https://westcoast-charts.com/gallery/gantt/draw-task/index.md) (premium): 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.
- [Scroll To Task](https://westcoast-charts.com/gallery/gantt/scroll-to-task/index.md) (premium): Jump to any task: its group opens, the timeline scrolls and the task is selected.
- [Sort Filter](https://westcoast-charts.com/gallery/gantt/sort-filter/index.md) (premium): 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.
- [Grouping](https://westcoast-charts.com/gallery/gantt/grouping/index.md) (premium): Each series is a collapsible group; expand / collapse all from the api.
- [Events](https://westcoast-charts.com/gallery/gantt/events/index.md) (premium): Hover, select, drag (taskChange, can veto), group toggle and zoom events.
- [Crosshair](https://westcoast-charts.com/gallery/gantt/crosshair/index.md) (premium): A vertical crosshair with a date pill follows the pointer over the timeline.
- [Custom Colors](https://westcoast-charts.com/gallery/gantt/custom-colors/index.md) (premium): Colours per group (series.color) and per task (fillColor).
- [Bar Labels](https://westcoast-charts.com/gallery/gantt/bar-labels/index.md) (premium): Labels beside or inside the bar (auto by room) with a formatter.
- [CSS Theming](https://westcoast-charts.com/gallery/gantt/css-theming/index.md) (premium): Stable classes (wcc-gantt-bar, wcc-gantt-progress, wcc-gantt-summary …) restyled with CSS.
- [Annotations](https://westcoast-charts.com/gallery/gantt/annotations/index.md) (premium): 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.
- [Accessibility](https://westcoast-charts.com/gallery/gantt/accessibility/index.md) (premium): Tab into the chart and use the arrow keys; screen readers get a summary and a data table.
- [Toolbar](https://westcoast-charts.com/gallery/gantt/toolbar/index.md) (premium): Built-in controls (today, zoom in / out, fit) plus app buttons driving the api (view, fit, zoom).
- [State Persistence](https://westcoast-charts.com/gallery/gantt/state-persistence/index.md) (premium): 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.
- [Localization RTL](https://westcoast-charts.com/gallery/gantt/localization-rtl/index.md) (premium): 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.
- [Hourly drag snap](https://westcoast-charts.com/gallery/gantt/hourly-snap/index.md) (premium): A one-day maintenance window with drag enabled and snap: 'hour': bars move and resize in whole hours.
- [Labels inside the bars](https://westcoast-charts.com/gallery/gantt/labels-inside/index.md) (premium): 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.

## Tree

- [Top To Bottom](https://westcoast-charts.com/gallery/tree/top-to-bottom/index.md) (premium): An organisation chart with the root at the top.
- [Bottom To Top](https://westcoast-charts.com/gallery/tree/bottom-to-top/index.md) (premium): The same chart growing upwards from the root.
- [Left To Right](https://westcoast-charts.com/gallery/tree/left-to-right/index.md) (premium): Horizontal layout with the root on the left.
- [Right To Left](https://westcoast-charts.com/gallery/tree/right-to-left/index.md) (premium): Horizontal layout with the root on the right.
- [Dynamic View Change](https://westcoast-charts.com/gallery/tree/dynamic-view-change/index.md) (premium): Switch the orientation at runtime; nodes move to their new places.
- [Radial Layout](https://westcoast-charts.com/gallery/tree/radial-layout/index.md) (premium): A module graph laid out on circles around the root.
- [Radial Dendrogram](https://westcoast-charts.com/gallery/tree/radial-dendrogram/index.md) (premium): Leaves on the outer ring (cluster layout) in radial form.
- [Default Cards](https://westcoast-charts.com/gallery/tree/default-cards/index.md) (premium): Cards with initials avatar, title and subtitle.
- [Minimal](https://westcoast-charts.com/gallery/tree/minimal/index.md) (premium): Dots and labels only.
- [Rich Node Card](https://westcoast-charts.com/gallery/tree/rich-node-card/index.md) (premium): 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.
- [Org Chart With Metrics](https://westcoast-charts.com/gallery/tree/org-chart-with-metrics/index.md) (premium): 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).
- [Per Node Options](https://westcoast-charts.com/gallery/tree/per-node-options/index.md) (premium): Colour, badge, subtitle and initial collapse set per node in the data.
- [Per Node Size](https://westcoast-charts.com/gallery/tree/per-node-size/index.md) (premium): 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.
- [Auto Node Height](https://westcoast-charts.com/gallery/tree/auto-node-height/index.md) (premium): 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.
- [Expandable Cards](https://westcoast-charts.com/gallery/tree/expandable-cards/index.md) (premium): Click a card toggle to expand or collapse its team; the view keeps the clicked card in place.
- [Count Badges](https://westcoast-charts.com/gallery/tree/count-badges/index.md) (premium): Each parent shows its number of direct reports on the toggle.
- [Node Wrappers](https://westcoast-charts.com/gallery/tree/node-wrappers/index.md) (premium): 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.
- [Custom Font Options](https://westcoast-charts.com/gallery/tree/custom-font-options/index.md) (premium): chart.fontFamily applies to titles, subtitles and badges.
- [Edge Color Mode](https://westcoast-charts.com/gallery/tree/edge-color-mode/index.md) (premium): Links coloured by branch, by depth, or a single colour; straight, elbow or curved.
- [Active Path](https://westcoast-charts.com/gallery/tree/active-path/index.md) (premium): Hover a node: its reporting line to the root and everything below light up.
- [External Labels](https://westcoast-charts.com/gallery/tree/external-labels/index.md) (premium): Dot nodes with the labels outside the marks (top to bottom).
- [External Labels LR](https://westcoast-charts.com/gallery/tree/external-labels-lr/index.md) (premium): Dot nodes, left to right, labels beside the dots.
- [Expand Collapse](https://westcoast-charts.com/gallery/tree/expand-collapse/index.md) (premium): A 5 000-node tree opening at level 2; expand any branch.
- [Batch Expand Collapse](https://westcoast-charts.com/gallery/tree/batch-expand-collapse/index.md) (premium): Expand all, collapse to a level or toggle one node from the api.
- [Group Leaf Nodes](https://westcoast-charts.com/gallery/tree/group-leaf-nodes/index.md) (premium): Leaf cards under a parent stack in a column instead of a wide row (stackLeaves).
- [Collapse Badges](https://westcoast-charts.com/gallery/tree/collapse-badges/index.md) (premium): Collapsed nodes show how many nodes are hidden below (+N).
- [Selection](https://westcoast-charts.com/gallery/tree/selection/index.md) (premium): Click a card to select it; the api selects from code and reports the selection.
- [Focus Mode](https://westcoast-charts.com/gallery/tree/focus-mode/index.md) (premium): Focus a person: collapsed ancestors open, the card is selected and panned into view.
- [Semantic Zoom](https://westcoast-charts.com/gallery/tree/semantic-zoom/index.md) (premium): Zoom out (Ctrl + wheel or the controls) and cards turn into simplified marks; zoom in for full cards.
- [Lazy Children](https://westcoast-charts.com/gallery/tree/lazy-children/index.md) (premium): 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.
- [Command Palette](https://westcoast-charts.com/gallery/tree/command-palette/index.md) (premium): Type a name or command; Enter focuses the person or runs the command through the api.
- [Live Data](https://westcoast-charts.com/gallery/tree/live-data/index.md) (premium): Values update every 2 s; badges and totals follow, the view stays put.
- [Time Travel](https://westcoast-charts.com/gallery/tree/time-travel/index.md) (premium): Step through yearly snapshots of the organisation; added and removed teams animate.
- [Dark Theme](https://westcoast-charts.com/gallery/tree/dark-theme/index.md) (premium): theme.mode: dark with the page surface (open with ?mode=dark for the whole page).
- [CSS Theming](https://westcoast-charts.com/gallery/tree/css-theming/index.md) (premium): Restyle cards, titles and links through their classes (wcc-tnode-card, wcc-tnode-title, wcc-tlink).
- [Accessibility](https://westcoast-charts.com/gallery/tree/accessibility/index.md) (premium): Tab into the chart and walk the hierarchy with the arrow keys.
- [Localization RTL](https://westcoast-charts.com/gallery/tree/localization-rtl/index.md) (premium): 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.

## Stock

- [Basic](https://westcoast-charts.com/gallery/stock/basic/index.md) (premium): Candles with volume, range selector, navigator, crosshair and readout.
- [Timeframe](https://westcoast-charts.com/gallery/stock/timeframe/index.md) (premium): Aggregate daily candles into weeks or months at runtime.
- [Price Scale](https://westcoast-charts.com/gallery/stock/price-scale/index.md) (premium): Linear, logarithmic or percent-change price axis.
- [Large Dataset](https://westcoast-charts.com/gallery/stock/large-dataset/index.md) (premium): 20 years of daily candles (about 5 200); only the visible range is drawn, the navigator summarises all.
- [Streaming](https://westcoast-charts.com/gallery/stock/streaming/index.md) (premium): 5-minute candles; a new tick every second updates the last candle, a new candle every 5 ticks; the view follows.
- [Analysis](https://westcoast-charts.com/gallery/stock/analysis/index.md) (premium): SMA, EMA and Bollinger overlays plus RSI and MACD panes.
- [Comparison](https://westcoast-charts.com/gallery/stock/comparison/index.md) (premium): Two more tickers rebased to the main close at the start of the view.
- [Cross Chart Sync](https://westcoast-charts.com/gallery/stock/cross-chart-sync/index.md) (premium): Zoom or pan either chart; the other follows (zoomed event + api.setRange).
- [Trading Overlays](https://westcoast-charts.com/gallery/stock/trading-overlays/index.md) (premium): 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".
- [Event Markers](https://westcoast-charts.com/gallery/stock/event-markers/index.md) (premium): Earnings, dividend and split flags below or above the candles, with tooltips.
- [Data Legend](https://westcoast-charts.com/gallery/stock/data-legend/index.md) (premium): The readout shows open, high, low, close, change and volume (and overlay values) for the hovered candle.
- [Toolbar](https://westcoast-charts.com/gallery/stock/toolbar/index.md) (premium): Built-in range buttons plus a page toolbar driving the api (style, zoom, timeframe).
- [Theming](https://westcoast-charts.com/gallery/stock/theming/index.md) (premium): Up / down colours, theme presets and dark mode.
- [Export](https://westcoast-charts.com/gallery/stock/export/index.md) (premium): Export the chart as PNG / SVG or the visible data as CSV.
- [All Drawing Tools](https://westcoast-charts.com/gallery/stock/drawing-tools/index.md) (premium): 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).

## Maps

- [Choropleth](https://westcoast-charts.com/gallery/maps/choropleth/index.md) (premium): Broadband adoption by country (illustrative), with a colour bar legend.
- [Bubbles](https://westcoast-charts.com/gallery/maps/bubbles/index.md) (premium): City sizes as proportional circles, with a size key.
- [Markers](https://westcoast-charts.com/gallery/maps/markers/index.md) (premium): Office pins with labels and partner sites as diamonds; markers keep their size while zooming.
- [Hexbin](https://westcoast-charts.com/gallery/maps/hexbin/index.md) (premium): 6 000 sample sightings binned into screen hexagons; size and colour follow the count.
- [Pixel](https://westcoast-charts.com/gallery/maps/pixel/index.md) (premium): The choropleth drawn as a dot (pixel) map.
- [Arcs](https://westcoast-charts.com/gallery/maps/arcs/index.md) (premium): Flight volumes from a hub; width follows the value, dashes show direction.
- [Routes](https://westcoast-charts.com/gallery/maps/routes/index.md) (premium): 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.
- [Basemap](https://westcoast-charts.com/gallery/maps/basemap/index.md) (premium): The map alone: graticule, sphere and borders without data.
- [Normalize](https://westcoast-charts.com/gallery/maps/normalize/index.md) (premium): Absolute counts divided by population (per million people).
- [Projections](https://westcoast-charts.com/gallery/maps/projections/index.md) (premium): Equal Earth, Mercator, equirectangular and an orthographic globe.
- [Registry](https://westcoast-charts.com/gallery/maps/registry/index.md) (premium): registerMap() with our own GeoJSON (a fictional island with four districts), then used by name.
- [Honeycomb](https://westcoast-charts.com/gallery/maps/honeycomb/index.md) (premium): 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).
- [Joins](https://westcoast-charts.com/gallery/maps/joins/index.md) (premium): Rows keyed by ISO-2, ISO-3 or English name all join to the same regions.
- [Extending](https://westcoast-charts.com/gallery/maps/extending/index.md) (premium): Inline GeoJSON (our own: a fictional campus) with a bubble layer on top, no registry needed.
- [Scales](https://westcoast-charts.com/gallery/maps/scales/index.md) (premium): Linear, log, quantize, diverging and explicit ranges on the same data.
- [Palettes](https://westcoast-charts.com/gallery/maps/palettes/index.md) (premium): 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.
- [Patterns](https://westcoast-charts.com/gallery/maps/patterns/index.md) (premium): 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.
- [Image Fill](https://westcoast-charts.com/gallery/maps/image-fill/index.md) (premium): Visited countries filled with their flags (inline SVG images; only image data URIs, http(s) or relative URLs are accepted).
- [Theming](https://westcoast-charts.com/gallery/maps/theming/index.md) (premium): Theme presets and dark mode on the same map.
- [Camera](https://westcoast-charts.com/gallery/maps/camera/index.md) (premium): Zoom to a region, zoom by a factor, reset, or rotate the globe from code.
- [Selection](https://westcoast-charts.com/gallery/maps/selection/index.md) (premium): Click a country to select it; the event reports it and the api can select from code.
- [Drilldown](https://westcoast-charts.com/gallery/maps/drilldown/index.md) (premium): 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.
- [Annotations](https://westcoast-charts.com/gallery/maps/annotations/index.md) (premium): 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.
- [A11Y](https://westcoast-charts.com/gallery/maps/a11y/index.md) (premium): Tab into the map; arrow keys move between regions with data, Enter selects, +/- zoom.
- [Export](https://westcoast-charts.com/gallery/maps/export/index.md) (premium): Export the map as PNG / SVG or the data as CSV.
- [Albers projections](https://westcoast-charts.com/gallery/maps/albers-projections/index.md) (premium): US states with the conic 'albers' projection and the composite 'albersUsa' (Alaska and Hawaii as insets).
- [Named palettes](https://westcoast-charts.com/gallery/maps/named-palettes/index.md) (premium): The sequential colour ramps by name: blue, green, purple, orange, red and gray (teal, heat and viridis appear on other pages).

## WCC originals

- [Marimekko](https://westcoast-charts.com/gallery/originals/marimekko/index.md) (premium): Variable-width stacked columns: width is the segment size, height the share.
- [Network graph](https://westcoast-charts.com/gallery/originals/network/index.md) (premium): Force-directed graph with clusters, weighted edges and focus on hover.
- [Chord](https://westcoast-charts.com/gallery/originals/chord/index.md) (premium): Flows between groups around a circle.
- [Sankey lab](https://westcoast-charts.com/gallery/originals/sankey-product-lab/index.md) (premium): Engineering lab page with every option of the sankey type side by side.
- [Gantt lab](https://westcoast-charts.com/gallery/originals/gantt-product-lab/index.md) (premium): Engineering lab page with every option of the gantt type side by side.
- [Tree lab](https://westcoast-charts.com/gallery/originals/tree-product-lab/index.md) (premium): Engineering lab page with every option of the tree type side by side.
- [Stock lab](https://westcoast-charts.com/gallery/originals/stock-product-lab/index.md) (premium): Engineering lab page with every option of the stock type side by side.
- [Map lab](https://westcoast-charts.com/gallery/originals/map-product-lab/index.md) (premium): Engineering lab page with every option of the map type side by side.

## Drilldown

- [Drilldown lab](https://westcoast-charts.com/gallery/drilldown/overview/index.md): The drilldown plugin on bars, pie, treemap and lines.

## Linked charts

- [Crossfilter lab](https://westcoast-charts.com/gallery/link/crossfilter/index.md): The link plugin: brushing one chart filters the others.

## Perspectives

- [Perspectives lab](https://westcoast-charts.com/gallery/perspectives/overview/index.md): Save a view, switch between views, share it as a link.

## History

- [History & narrative lab](https://westcoast-charts.com/gallery/history/story/index.md): Rewind toolbar and recorded narrative frames.

## Storyboard

- [Storyboard lab](https://westcoast-charts.com/gallery/storyboard/overview/index.md): Scroll inside the card: each text block moves the chart to its view.

## Canvas

- [Canvas renderer lab](https://westcoast-charts.com/gallery/canvas/renderer-canvas/index.md): SVG and canvas side by side.

## Theming

- [Theme preview](https://westcoast-charts.com/gallery/theming/theme-preview/index.md): The same dashboard in the selected preset and mode.

## Type labs

- [Bar race](https://westcoast-charts.com/gallery/labs/bar-race/index.md): All options of this type side by side.
- [Beeswarm](https://westcoast-charts.com/gallery/labs/beeswarm/index.md): All options of this type side by side.
- [Calendar](https://westcoast-charts.com/gallery/labs/calendar/index.md): All options of this type side by side.
- [Dumbbell](https://westcoast-charts.com/gallery/labs/dumbbell/index.md): All options of this type side by side.
- [Funnel](https://westcoast-charts.com/gallery/labs/funnel/index.md): All options of this type side by side.
- [Gauge](https://westcoast-charts.com/gallery/labs/gauge/index.md): All options of this type side by side.
- [Histogram](https://westcoast-charts.com/gallery/labs/histogram/index.md): All options of this type side by side.
- [Honeycomb](https://westcoast-charts.com/gallery/labs/honeycomb/index.md): All options of this type side by side.
- [Icicle](https://westcoast-charts.com/gallery/labs/icicle/index.md): All options of this type side by side.
- [Morph](https://westcoast-charts.com/gallery/labs/morph/index.md): All options of this type side by side.
- [Pyramid](https://westcoast-charts.com/gallery/labs/pyramid/index.md): All options of this type side by side.
- [Raincloud](https://westcoast-charts.com/gallery/labs/raincloud/index.md): All options of this type side by side.
- [Slope](https://westcoast-charts.com/gallery/labs/slope/index.md): All options of this type side by side.
- [Streamgraph](https://westcoast-charts.com/gallery/labs/streamgraph/index.md): All options of this type side by side.
- [Sunburst](https://westcoast-charts.com/gallery/labs/sunburst/index.md): All options of this type side by side.
- [Treemap nested](https://westcoast-charts.com/gallery/labs/treemap-nested/index.md): All options of this type side by side.
- [Unit](https://westcoast-charts.com/gallery/labs/unit/index.md): All options of this type side by side.
- [Violin](https://westcoast-charts.com/gallery/labs/violin/index.md): All options of this type side by side.
- [Waffle](https://westcoast-charts.com/gallery/labs/waffle/index.md): All options of this type side by side.
- [Waterfall](https://westcoast-charts.com/gallery/labs/waterfall/index.md): All options of this type side by side.

## Originals: variants

- [Chord: sort and ribbon colour](https://westcoast-charts.com/gallery/original-variants/chord-sort-and-colour/index.md) (premium): Office-to-office travel: groups sorted 'asc' and 'desc' by size, ribbons coloured by their 'source' or 'target'.
- [Marimekko: column sort](https://westcoast-charts.com/gallery/original-variants/marimekko-sort/index.md) (premium): Cloud spend by region and service, columns sorted 'desc' and 'asc' by their total.
- [Network: node size and renderer](https://westcoast-charts.com/gallery/original-variants/network-size-and-renderer/index.md) (premium): A small library dependency graph with nodes.sizeBy 'value', 'degree' and 'none', and the same graph forced to renderer 'svg' and 'canvas'.
- [Radial column: series colours and radial labels](https://westcoast-charts.com/gallery/original-variants/radial-column-series-fill-radial-labels/index.md) (premium): 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.
- [Radial column: legend right and bottom](https://westcoast-charts.com/gallery/original-variants/radial-column-legend-position/index.md) (premium): 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'.

## Network

- [Incident Blast Radius](https://westcoast-charts.com/gallery/network/facet-incident/index.md) (premium): 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.
- [Facet Layout at Scale](https://westcoast-charts.com/gallery/network/facet-estate/index.md) (premium): 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.

## Control-room concepts

- [Nested radial cascade: four levels of one incident](https://westcoast-charts.com/gallery/concepts/nested-radial-cascade/index.md) (premium): 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.
- [Matrix lattice: status grid linked to relation flows](https://westcoast-charts.com/gallery/concepts/matrix-lattice/index.md) (premium): 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.
- [Net lattice: cluster topology with anomaly badges](https://westcoast-charts.com/gallery/concepts/net-lattice/index.md) (premium): 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.

## Quint Timeline

- [Quint timeline: SaaS ops control room, 24 h](https://westcoast-charts.com/gallery/quint-timeline/saas-ops/index.md) (premium): Five 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.

## Quint Convergence

- [Quint convergence: the 18:40 EU incident](https://westcoast-charts.com/gallery/quint-convergence/eu-incident/index.md) (premium): The 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.
- [Three-lane convergence: requests, latency, regions](https://westcoast-charts.com/gallery/quint-convergence/three-lane/index.md) (premium): A compact convergence view with three lanes and a stronger lens (×6, 30 min of context on each side).

## Medicine & practice

- [Ward vitals clock: 24 h from 15:00 (V2)](https://westcoast-charts.com/gallery/medical/vitals-ward/index.md) (premium): 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.
- [Practice vitals clock: 12 h, few measurements](https://westcoast-charts.com/gallery/medical/vitals-practice/index.md) (premium): 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.
- [Threshold-band rings on a radialColumn (V1)](https://westcoast-charts.com/gallery/medical/vitals-bands/index.md) (premium): 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.
- [Live feed (demo): append measurements (V3)](https://westcoast-charts.com/gallery/medical/vitals-live/index.md) (premium): 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.
- [Practice day: rooms as lanes, doctor routes, conflicts](https://westcoast-charts.com/gallery/medical/schedule-day/index.md) (premium): 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.
- [Practice day: staff as lanes](https://westcoast-charts.com/gallery/medical/schedule-staff/index.md) (premium): The same model with lanes: "people": one lane per person; an appointment with two people (doctor + assistant) shows in both lanes.
- [Board: day vertical, columns = rooms](https://westcoast-charts.com/gallery/medical/board-day/index.md) (premium): view: "board" (automatic below 560 px): time downwards, one column per room.
- [Board: week Mon–Fri × rooms](https://westcoast-charts.com/gallery/medical/board-week/index.md) (premium): 304 appointments of the week, columns = days × rooms; Monday's conflicts stay marked.
- [Patient flow: stages per patient (rangeBar)](https://westcoast-charts.com/gallery/medical/flow-timeline/index.md) (premium): 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).
- [Patient flow: transitions with median / P90 (sankey)](https://westcoast-charts.com/gallery/medical/flow-sankey/index.md) (premium): The same visits as a sankey: width = patients; the tooltip shows the median and P90 duration per transition (sankeyPlugin from flow.fromEvents()).
- [Utilization per room and half hour (heatmap)](https://westcoast-charts.com/gallery/medical/util-heatmap/index.md) (premium): 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 %.
- [Utilization per day, 4 weeks (calendar)](https://westcoast-charts.com/gallery/medical/util-calendar/index.md) (premium): Daily values from schedule.utilization() with day buckets; weekends closed: hatched, own legend entry, tooltip “closed”.