# WestCoast Charts examples 528 original JavaScript chart examples: 333 Free Core and 195 Premium examples, with source pages, configuration references and an interactive data editor. HTML: https://westcoast-charts.com/examples/ Free Core is MIT-licensed, including commercial use with its notices retained. Premium is the commercial offer; independent MIT rights remain unchanged. [Download Free Core](https://westcoast-charts.com/download/) · [Premium trial and licences](https://westcoast-charts.com/pricing/) · [Chart Playground](https://westcoast-charts.com/chart-playground/) The examples retain their original titles, illustrative data and source configurations. Configuration links are provided where an existing detailed reference matches the sample. The other original sample pages are the authoritative source; this directory does not invent a single configuration for multi-chart or interactive examples. ## Chart types ### Line - **[Basic line](https://westcoast-charts.com/gallery/line/basic-line/)** — Free Core. One series of monthly sign-ups on a category axis. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/line/basic-line.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/line/basic-line/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=line%2Fbasic-line) - **[Line with data labels](https://westcoast-charts.com/gallery/line/line-with-data-labels/)** — Free Core. Two temperature lines with value labels and markers. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/line/line-with-data-labels.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/line/line-with-data-labels/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=line%2Fline-with-data-labels) - **[Zoomable time series](https://westcoast-charts.com/gallery/line/zoomable-timeseries/)** — Free Core. Two years of daily traffic with x zoom, toolbar and a gradient area under the line. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/line/zoomable-timeseries.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/line/zoomable-timeseries/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=line%2Fzoomable-timeseries) - **[Line with annotations](https://westcoast-charts.com/gallery/line/line-with-annotations/)** — Free Core. Share price with a target line, a highlighted range and point callouts. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/line/line-with-annotations.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/line/line-with-annotations/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=line%2Fline-with-annotations) - **[Synced charts](https://westcoast-charts.com/gallery/line/syncing-charts/)** — Free Core. Three stacked charts in one group share crosshair and tooltip. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/line/syncing-charts.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/line/syncing-charts/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=line%2Fsyncing-charts) - **[Brush chart](https://westcoast-charts.com/gallery/line/brush-charts/)** — Free Core. A detail chart driven by a brush selection on an overview chart. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/line/brush-charts.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/line/brush-charts/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=line%2Fbrush-charts) - **[Stepline](https://westcoast-charts.com/gallery/line/stepline/)** — Free Core. Price tiers that change in steps. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/line/stepline.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/line/stepline/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=line%2Fstepline) - **[Gradient line](https://westcoast-charts.com/gallery/line/gradient-line/)** — Free Core. A line whose stroke runs through a colour gradient. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/line/gradient-line.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/line/gradient-line/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=line%2Fgradient-line) - **[Line with missing data](https://westcoast-charts.com/gallery/line/line-with-missing-data/)** — Free Core. Sensor readings with gaps (null) that break the line. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/line/line-with-missing-data.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/line/line-with-missing-data/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=line%2Fline-with-missing-data) - **[Dashed lines](https://westcoast-charts.com/gallery/line/dashed-line/)** — Free Core. Actual, plan and forecast lines with different dash patterns. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/line/dashed-line.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/line/dashed-line/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=line%2Fdashed-line) - **[Realtime](https://westcoast-charts.com/gallery/line/realtime/)** — Free Core. A line that appends a point every second and slides. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/line/realtime.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/line/realtime/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=line%2Frealtime) - **[Large dataset, downsampled](https://westcoast-charts.com/gallery/line/line-large-dataset-downsampling/)** — Free Core. 50 000 points drawn with peak-preserving decimation. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/line/line-large-dataset-downsampling.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/line/line-large-dataset-downsampling/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=line%2Fline-large-dataset-downsampling) - **[Annotation tooltips](https://westcoast-charts.com/gallery/line/line-with-annotation-tooltips/)** — Free Core. Release markers on a line; hovering or focusing a marker shows what shipped (annotation wcc.tooltip). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/line/line-with-annotation-tooltips.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/line/line-with-annotation-tooltips/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=line%2Fline-with-annotation-tooltips) - **[Line with drilldown](https://westcoast-charts.com/gallery/line/line-with-drilldown/)** — Free Core. Click a year to drill into its months; the breadcrumb or Backspace goes back. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/line/line-with-drilldown.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/line/line-with-drilldown/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=line%2Fline-with-drilldown) ### Area - **[Basic area](https://westcoast-charts.com/gallery/area/basic-area/)** — Free Core. Weekly downloads as a smooth filled area. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/area/basic-area.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/area/basic-area/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=area%2Fbasic-area) - **[Spline area](https://westcoast-charts.com/gallery/area/area-spline/)** — Free Core. Two overlapping smooth areas. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/area/area-spline.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/area/area-spline/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=area%2Farea-spline) - **[Datetime area](https://westcoast-charts.com/gallery/area/area-datetime/)** — Free Core. A datetime area with range buttons (1M / 6M / 1Y / All). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/area/area-datetime.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/area/area-datetime/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=area%2Farea-datetime) - **[Area with negative values](https://westcoast-charts.com/gallery/area/area-with-negative/)** — Free Core. Net cash flow that crosses zero, filled to the zero line. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/area/area-with-negative.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/area/area-with-negative/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=area%2Farea-with-negative) - **[Contribution-style area](https://westcoast-charts.com/gallery/area/area-github-style/)** — Free Core. A compact activity area with a brush overview, in the style of a code-host contributions graph. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/area/area-github-style.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/area/area-github-style/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=area%2Farea-github-style) - **[Stacked area](https://westcoast-charts.com/gallery/area/stacked-area/)** — Free Core. Three stacked channels over time. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/area/stacked-area.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/area/stacked-area/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=area%2Fstacked-area) - **[Area with missing data](https://westcoast-charts.com/gallery/area/area-with-missing-data/)** — Free Core. Areas with null gaps. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/area/area-with-missing-data.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/area/area-with-missing-data/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=area%2Farea-with-missing-data) - **[Irregular time series](https://westcoast-charts.com/gallery/area/timeseries-with-irregular-data/)** — Free Core. Three series sampled at different, uneven timestamps. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/area/timeseries-with-irregular-data.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/area/timeseries-with-irregular-data/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=area%2Ftimeseries-with-irregular-data) ### Column - **[Basic column](https://westcoast-charts.com/gallery/column/basic-column/)** — Free Core. Three products per quarter as grouped columns. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/basic-column.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/basic-column/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=column%2Fbasic-column) - **[Column with data labels](https://westcoast-charts.com/gallery/column/column-with-data-labels/)** — Free Core. Monthly conversion rate with labels on top of each column. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/column-with-data-labels.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/column-with-data-labels/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=column%2Fcolumn-with-data-labels) - **[Stacked column](https://westcoast-charts.com/gallery/column/stacked-column/)** — Free Core. Support tickets by severity, stacked with totals. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/stacked-column.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/stacked-column/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=column%2Fstacked-column) - **[100% stacked column](https://westcoast-charts.com/gallery/column/stacked-column-100/)** — Free Core. Device share per month, normalised to 100%. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/stacked-column-100.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/stacked-column-100/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=column%2Fstacked-column-100) - **[Rotated labels](https://westcoast-charts.com/gallery/column/column-with-rotated-labels/)** — Free Core. Long category names rotated to fit. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/column-with-rotated-labels.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/column-with-rotated-labels/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=column%2Fcolumn-with-rotated-labels) - **[Column with negatives](https://westcoast-charts.com/gallery/column/column-with-negative/)** — Free Core. Monthly profit and loss, coloured by sign. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/column-with-negative.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/column-with-negative/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=column%2Fcolumn-with-negative) - **[Dynamically loaded](https://westcoast-charts.com/gallery/column/dynamic-loaded-chart/)** — Free Core. Click a year column to load its quarters into a second chart. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/dynamic-loaded-chart.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/dynamic-loaded-chart/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=column%2Fdynamic-loaded-chart) - **[Distributed columns](https://westcoast-charts.com/gallery/column/distributed-columns/)** — Free Core. One colour per column, legend hidden. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/distributed-columns.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/distributed-columns/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=column%2Fdistributed-columns) - **[Range column](https://westcoast-charts.com/gallery/column/range-column/)** — Free Core. Floating min–max columns of daily temperatures. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/range-column.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/range-column/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=column%2Frange-column) - **[Grouped stacked column](https://westcoast-charts.com/gallery/column/grouped-stacked-column/)** — Free Core. Budget and actual stacks side by side per quarter. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/grouped-stacked-column.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/grouped-stacked-column/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=column%2Fgrouped-stacked-column) - **[Column with goal markers](https://westcoast-charts.com/gallery/column/column-with-markers/)** — Free Core. Actual columns with a target marker on each. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/column-with-markers.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/column-with-markers/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=column%2Fcolumn-with-markers) - **[Grouped axis labels](https://westcoast-charts.com/gallery/column/column-with-group-label/)** — Free Core. Months grouped under year labels on the x axis. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/column-with-group-label.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/column-with-group-label/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=column%2Fcolumn-with-group-label) - **[Column drilldown](https://westcoast-charts.com/gallery/column/column-with-drilldown/)** — Free Core. Click a region to see its countries, then a country to see its cities. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/column-with-drilldown.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/column-with-drilldown/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=column%2Fcolumn-with-drilldown) - **[Drilldown with zoom](https://westcoast-charts.com/gallery/column/column-drilldown-zoom/)** — Free Core. Weeks drill into hours; the hourly level is a zoomable time series. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/column-drilldown-zoom.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/column-drilldown-zoom/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=column%2Fcolumn-drilldown-zoom) - **[Async drilldown](https://westcoast-charts.com/gallery/column/column-drilldown-async/)** — Free Core. Drilling loads the next level asynchronously; a loading bar shows while it arrives. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/column-drilldown-async.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/column-drilldown-async/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=column%2Fcolumn-drilldown-async) ### Bar - **[Basic bar](https://westcoast-charts.com/gallery/bar/basic-bar/)** — Free Core. Ranked horizontal bars. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/bar/basic-bar.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/bar/basic-bar/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=bar%2Fbasic-bar) - **[Grouped bar](https://westcoast-charts.com/gallery/bar/grouped-bar/)** — Free Core. Two years side by side per team. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/bar/grouped-bar.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/bar/grouped-bar/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=bar%2Fgrouped-bar) - **[Stacked bar](https://westcoast-charts.com/gallery/bar/stacked-bar/)** — Free Core. Time spent per activity, stacked per person. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/bar/stacked-bar.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/bar/stacked-bar/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=bar%2Fstacked-bar) - **[100% stacked bar](https://westcoast-charts.com/gallery/bar/stacked-bar-100/)** — Free Core. Survey answers per question as shares. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/bar/stacked-bar-100.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/bar/stacked-bar-100/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=bar%2Fstacked-bar-100) - **[Population pyramid (negatives)](https://westcoast-charts.com/gallery/bar/bar-with-negative/)** — Free Core. Two-sided bars around zero with absolute labels. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/bar/bar-with-negative.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/bar/bar-with-negative/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=bar%2Fbar-with-negative) - **[Reversed bar](https://westcoast-charts.com/gallery/bar/reversed-bar/)** — Free Core. Bars growing from the right with the axis reversed. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/bar/reversed-bar.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/bar/reversed-bar/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=bar%2Freversed-bar) - **[Custom data labels](https://westcoast-charts.com/gallery/bar/bar-with-custom-data-labels/)** — Free Core. Category names written inside the bars, axis labels hidden. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/bar/bar-with-custom-data-labels.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/bar/bar-with-custom-data-labels/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=bar%2Fbar-with-custom-data-labels) - **[Patterned bar](https://westcoast-charts.com/gallery/bar/patterned-bar/)** — Free Core. Stacked bars filled with line and dot patterns (print-friendly). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/bar/patterned-bar.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/bar/patterned-bar/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=bar%2Fpatterned-bar) - **[Bar with image fill](https://westcoast-charts.com/gallery/bar/bar-with-images/)** — Free Core. Bars filled with generated texture images (our own SVG tiles). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/bar/bar-with-images.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/bar/bar-with-images/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=bar%2Fbar-with-images) - **[Bar with goal markers](https://westcoast-charts.com/gallery/bar/bar-with-markers/)** — Free Core. Horizontal bars with target ticks. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/bar/bar-with-markers.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/bar/bar-with-markers/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=bar%2Fbar-with-markers) - **[Grouped stacked bar](https://westcoast-charts.com/gallery/bar/grouped-stacked-bar/)** — Free Core. Two stacked groups per category, horizontal. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/bar/grouped-stacked-bar.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/bar/grouped-stacked-bar/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=bar%2Fgrouped-stacked-bar) - **[Bar chart race](https://westcoast-charts.com/gallery/bar/horizontal-bar-race/)** — Free Core. Cities re-rank month by month with a ticker. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/bar/horizontal-bar-race.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/bar/horizontal-bar-race/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=bar%2Fhorizontal-bar-race) - **[Bar race: missing values hidden](https://westcoast-charts.com/examples/view/?example=bar%2Fbar-race-hidden-gaps)** — Free Core. Studios without a figure for a month drop out of the race (nulls 'hide') instead of showing a dash. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/bar/bar-race-hidden-gaps.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=bar%2Fbar-race-hidden-gaps) ### Mixed / combo - **[Line and column](https://westcoast-charts.com/gallery/mixed/line-column/)** — Free Core. Revenue columns with a margin line on a second axis. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/mixed/line-column.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/mixed/line-column/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=mixed%2Fline-column) - **[Multiple y axes](https://westcoast-charts.com/gallery/mixed/multiple-yaxes/)** — Free Core. Three measures with three coloured y axes. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/mixed/multiple-yaxes.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/mixed/multiple-yaxes/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=mixed%2Fmultiple-yaxes) - **[Dual axes, zero aligned](https://westcoast-charts.com/gallery/mixed/multiple-yaxes-aligned-zero/)** — Free Core. Two axes with different scales whose zero lines coincide (yaxis wcc.alignZero). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/mixed/multiple-yaxes-aligned-zero.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/mixed/multiple-yaxes-aligned-zero/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=mixed%2Fmultiple-yaxes-aligned-zero) - **[Dual axis currency labels](https://westcoast-charts.com/gallery/mixed/dual-axis-currency-labels/)** — Free Core. Euro and US-dollar axes with compact currency labels. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/mixed/dual-axis-currency-labels.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/mixed/dual-axis-currency-labels/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=mixed%2Fdual-axis-currency-labels) - **[Line and area](https://westcoast-charts.com/gallery/mixed/line-area/)** — Free Core. An area of capacity with a line of demand. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/mixed/line-area.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/mixed/line-area/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=mixed%2Fline-area) - **[Line, column and area](https://westcoast-charts.com/gallery/mixed/line-column-area/)** — Free Core. Three series types combined. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/mixed/line-column-area.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/mixed/line-column-area/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=mixed%2Fline-column-area) ### Range area - **[Basic range area](https://westcoast-charts.com/gallery/range-area/basic-range-area/)** — Free Core. Daily low–high temperature band. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/range-area/basic-range-area.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/range-area/basic-range-area/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=range-area%2Fbasic-range-area) - **[Range band with line and forecast](https://westcoast-charts.com/gallery/range-area/range-area-line-combo/)** — Free Core. Confidence band plus median line and a dashed forecast. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/range-area/range-area-line-combo.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/range-area/range-area-line-combo/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=range-area%2Frange-area-line-combo) ### Streamgraph - **[Basic streamgraph](https://westcoast-charts.com/gallery/streamgraph/basic-streamgraph/)** — Free Core. Listening hours by genre over two years. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/streamgraph/basic-streamgraph.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/streamgraph/basic-streamgraph/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=streamgraph%2Fbasic-streamgraph) - **[Streamgraph, expanded](https://westcoast-charts.com/gallery/streamgraph/streamgraph-expand/)** — Free Core. Share of total (0–100%) instead of absolute values. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/streamgraph/streamgraph-expand.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/streamgraph/streamgraph-expand/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=streamgraph%2Fstreamgraph-expand) - **[Many series](https://westcoast-charts.com/gallery/streamgraph/streamgraph-many-series/)** — Free Core. Twelve product lines in one stream. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/streamgraph/streamgraph-many-series.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/streamgraph/streamgraph-many-series/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=streamgraph%2Fstreamgraph-many-series) - **[Conversation stream](https://westcoast-charts.com/gallery/streamgraph/streamgraph-conversation/)** — Free Core. Symmetric (silhouette) stream of topics in a community thread, with labelled bands and a story note. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/streamgraph/streamgraph-conversation.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/streamgraph/streamgraph-conversation/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=streamgraph%2Fstreamgraph-conversation) - **[Layer order](https://westcoast-charts.com/examples/view/?example=streamgraph%2Fstream-order)** — Free Core. The same stream with order 'inside-out' (default), 'inverse' and 'none' (data order). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/streamgraph/stream-order.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=streamgraph%2Fstream-order) ### Waterfall - **[Basic waterfall](https://westcoast-charts.com/gallery/waterfall/basic-waterfall/)** — Free Core. Opening to closing cash with subtotals. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/waterfall/basic-waterfall.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/waterfall/basic-waterfall/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=waterfall%2Fbasic-waterfall) - **[Horizontal waterfall](https://westcoast-charts.com/gallery/waterfall/waterfall-horizontal/)** — Free Core. A horizontal bridge with long step names. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/waterfall/waterfall-horizontal.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/waterfall/waterfall-horizontal/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=waterfall%2Fwaterfall-horizontal) - **[Crowded currency labels](https://westcoast-charts.com/gallery/waterfall/waterfall-crowded-currency-labels/)** — Free Core. Twelve monthly steps in euros plus a total. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/waterfall/waterfall-crowded-currency-labels.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/waterfall/waterfall-crowded-currency-labels/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=waterfall%2Fwaterfall-crowded-currency-labels) ### Dumbbell - **[Basic dumbbell](https://westcoast-charts.com/gallery/dumbbell/basic-dumbbell/)** — Free Core. Engagement score in 2024 and 2026 per department. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/dumbbell/basic-dumbbell.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/dumbbell/basic-dumbbell/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=dumbbell%2Fbasic-dumbbell) - **[Vertical dumbbell](https://westcoast-charts.com/gallery/dumbbell/dumbbell-column/)** — Free Core. Start and current salary per level, vertical. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/dumbbell/dumbbell-column.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/dumbbell/dumbbell-column/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=dumbbell%2Fdumbbell-column) - **[Three measures](https://westcoast-charts.com/gallery/dumbbell/dumbbell-three-measures/)** — Free Core. Minimum, target and actual per region. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/dumbbell/dumbbell-three-measures.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/dumbbell/dumbbell-three-measures/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=dumbbell%2Fdumbbell-three-measures) ### Timeline / range bar - **[Simple timeline](https://westcoast-charts.com/gallery/timeline/simple/)** — Free Core. Project phases on a date axis. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/timeline/simple.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/timeline/simple/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=timeline%2Fsimple) - **[Grouped rows](https://westcoast-charts.com/gallery/timeline/multi-series-group-rows/)** — Free Core. Several people per row, coloured by role (rangeBarGroupRows). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/timeline/multi-series-group-rows.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/timeline/multi-series-group-rows/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=timeline%2Fmulti-series-group-rows) - **[Multi-series timeline](https://westcoast-charts.com/gallery/timeline/multi-series/)** — Free Core. Planned and actual bars per task. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/timeline/multi-series.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/timeline/multi-series/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=timeline%2Fmulti-series) - **[Advanced timeline](https://westcoast-charts.com/gallery/timeline/advanced/)** — Free Core. Overlapping bars with data labels showing durations. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/timeline/advanced.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/timeline/advanced/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=timeline%2Fadvanced) - **[Per-bar colours](https://westcoast-charts.com/gallery/timeline/controlling-colors/)** — Free Core. Each bar picks its own colour (fillColor). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/timeline/controlling-colors.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/timeline/controlling-colors/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=timeline%2Fcontrolling-colors) ### Funnel - **[Funnel](https://westcoast-charts.com/gallery/funnel/funnel/)** — Free Core. Sales funnel from visit to purchase. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/funnel/funnel.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/funnel/funnel/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=funnel%2Ffunnel) - **[Pyramid](https://westcoast-charts.com/gallery/funnel/pyramid/)** — Free Core. Tier pyramid with heights proportional to value. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/funnel/pyramid.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/funnel/pyramid/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=funnel%2Fpyramid) - **[Tapered trapezoid funnel](https://westcoast-charts.com/gallery/funnel/trapezoid-funnel-tapered/)** — Free Core. Smooth trapezoid stages with conversion rates. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/funnel/trapezoid-funnel-tapered.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/funnel/trapezoid-funnel-tapered/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=funnel%2Ftrapezoid-funnel-tapered) ### Candlestick - **[Basic candlestick](https://westcoast-charts.com/gallery/candlestick/basic/)** — Free Core. Sixty trading days of a fictional stock. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/candlestick/basic.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/candlestick/basic/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=candlestick%2Fbasic) - **[Candles with volume brush](https://westcoast-charts.com/gallery/candlestick/candlestick-bar/)** — Free Core. Candles on top, volume bars below acting as a brush. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/candlestick/candlestick-bar.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/candlestick/candlestick-bar/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=candlestick%2Fcandlestick-bar) - **[Candles on a category axis](https://westcoast-charts.com/gallery/candlestick/candlestick-category/)** — Free Core. Weekly candles labelled by week, no time gaps. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/candlestick/candlestick-category.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/candlestick/candlestick-category/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=candlestick%2Fcandlestick-category) - **[Candles with moving average](https://westcoast-charts.com/gallery/candlestick/candlestick-line/)** — Free Core. Candles plus a 10-day moving-average line. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/candlestick/candlestick-line.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/candlestick/candlestick-line/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=candlestick%2Fcandlestick-line) ### Box plot - **[Basic box plot](https://westcoast-charts.com/gallery/boxplot/basic/)** — Free Core. Delivery time per carrier. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/boxplot/basic.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/boxplot/basic/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=boxplot%2Fbasic) - **[Box plot with outliers](https://westcoast-charts.com/gallery/boxplot/boxplot-scatter/)** — Free Core. Boxes plus outliers drawn as a scatter series. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/boxplot/boxplot-scatter.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/boxplot/boxplot-scatter/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=boxplot%2Fboxplot-scatter) - **[Horizontal box plot](https://westcoast-charts.com/gallery/boxplot/horizontal-boxplot/)** — Free Core. Page load time per page type, horizontal. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/boxplot/horizontal-boxplot.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/boxplot/horizontal-boxplot/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=boxplot%2Fhorizontal-boxplot) - **[Box plot with points](https://westcoast-charts.com/gallery/boxplot/boxplot-with-points/)** — Free Core. Boxes with every observation drawn on top, spread by a deterministic jitter (boxPlot wcc.jitter). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/boxplot/boxplot-with-points.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/boxplot/boxplot-with-points/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=boxplot%2Fboxplot-with-points) - **[Horizontal box plot with points](https://westcoast-charts.com/gallery/boxplot/horizontal-boxplot-with-points/)** — Free Core. Horizontal boxes with jittered observations (raincloud form). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/boxplot/horizontal-boxplot-with-points.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/boxplot/horizontal-boxplot-with-points/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=boxplot%2Fhorizontal-boxplot-with-points) - **[From raw observations](https://westcoast-charts.com/gallery/boxplot/boxplot-from-raw-observations/)** — Free Core. Quartiles computed from raw samples; resample to update. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/boxplot/boxplot-from-raw-observations.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/boxplot/boxplot-from-raw-observations/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=boxplot%2Fboxplot-from-raw-observations) - **[Same box, different data](https://westcoast-charts.com/gallery/boxplot/same-box-different-data/)** — Free Core. Two samples with an identical box summary but different shapes, shown as boxes and as unit dots. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/boxplot/same-box-different-data.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/boxplot/same-box-different-data/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=boxplot%2Fsame-box-different-data) - **[Raw samples: whisker rules](https://westcoast-charts.com/examples/view/?example=boxplot%2Fraw-samples-whiskers)** — Free Core. Boxes computed from raw observations (data\[\].points) with whiskers 'minmax', 'tukey' (1.5×IQR) and 'percentile' (5–95 %); outlier dots show what falls beyond. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/boxplot/raw-samples-whiskers.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=boxplot%2Fraw-samples-whiskers) - **[Raw samples: every observation](https://westcoast-charts.com/examples/view/?example=boxplot%2Fraw-samples-points)** — Free Core. points.show 'all' with circles in the darker series shade, squares in a custom colour, and dots coloured by value on horizontal boxes. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/boxplot/raw-samples-points.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=boxplot%2Fraw-samples-points) ### Violin - **[Basic violin](https://westcoast-charts.com/gallery/violin/basic-violin/)** — Free Core. Response time per service with inner boxes. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/violin/basic-violin.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/violin/basic-violin/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=violin%2Fbasic-violin) - **[Violin with jitter](https://westcoast-charts.com/gallery/violin/violin-with-jitter/)** — Free Core. Densities with every observation jittered on top. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/violin/violin-with-jitter.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/violin/violin-with-jitter/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=violin%2Fviolin-with-jitter) - **[Horizontal violin](https://westcoast-charts.com/gallery/violin/horizontal-violin/)** — Free Core. Order value per region, horizontal. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/violin/horizontal-violin.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/violin/horizontal-violin/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=violin%2Fhorizontal-violin) - **[Bimodal, horizontal](https://westcoast-charts.com/gallery/violin/horizontal-bimodal/)** — Free Core. Two-peaked commute times show up as double bulges. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/violin/horizontal-bimodal.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/violin/horizontal-bimodal/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=violin%2Fhorizontal-bimodal) - **[Colour-graded jitter](https://westcoast-charts.com/gallery/violin/colored-jitter/)** — Free Core. Points coloured on a red–amber–green scale by value. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/violin/colored-jitter.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/violin/colored-jitter/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=violin%2Fcolored-jitter) - **[Violin ⇄ swarm morph](https://westcoast-charts.com/gallery/violin/violin-to-jitter-morph/)** — Free Core. Toggle between density shapes and individual points. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/violin/violin-to-jitter-morph.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/violin/violin-to-jitter-morph/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=violin%2Fviolin-to-jitter-morph) - **[Tukey whiskers on a shared scale](https://westcoast-charts.com/examples/view/?example=violin%2Ftukey-shared-scale)** — Free Core. Box whiskers at 1.5 × IQR, one density scale for all groups (normalize 'group'), dots in the series colour. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/violin/tukey-shared-scale.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=violin%2Ftukey-shared-scale) ### Raincloud - **[Basic raincloud](https://westcoast-charts.com/gallery/raincloud/basic-raincloud/)** — Free Core. Time to first value per onboarding flow. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/raincloud/basic-raincloud.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/raincloud/basic-raincloud/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=raincloud%2Fbasic-raincloud) - **[Cloud and rain](https://westcoast-charts.com/gallery/raincloud/cloud-and-rain/)** — Free Core. Dense sample with small square drops. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/raincloud/cloud-and-rain.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/raincloud/cloud-and-rain/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=raincloud%2Fcloud-and-rain) - **[Horizontal raincloud](https://westcoast-charts.com/gallery/raincloud/horizontal-raincloud/)** — Free Core. Cloud above, rain below, one colour per group. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/raincloud/horizontal-raincloud.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/raincloud/horizontal-raincloud/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=raincloud%2Fhorizontal-raincloud) - **[Raincloud variations](https://westcoast-charts.com/gallery/raincloud/raincloud-variations/)** — Free Core. Switch between four layouts of the same data. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/raincloud/raincloud-variations.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/raincloud/raincloud-variations/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=raincloud%2Fraincloud-variations) ### Histogram - **[Latency distribution](https://westcoast-charts.com/gallery/histogram/latency-distribution/)** — Free Core. 1 000 request latencies binned automatically. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/histogram/latency-distribution.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/histogram/latency-distribution/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=histogram%2Flatency-distribution) - **[Comparing distributions](https://westcoast-charts.com/gallery/histogram/comparing-distributions/)** — Free Core. Two overlaid, normalised histograms. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/histogram/comparing-distributions.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/histogram/comparing-distributions/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=histogram%2Fcomparing-distributions) - **[Explode to observations](https://westcoast-charts.com/gallery/histogram/explode-to-observations/)** — Free Core. Bars break apart into the individual observations. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/histogram/explode-to-observations.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/histogram/explode-to-observations/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=histogram%2Fexplode-to-observations) - **[Bin rules side by side](https://westcoast-charts.com/examples/view/?example=histogram%2Fbin-rules)** — Free Core. One skewed sample binned by every rule: auto, Freedman–Diaconis, Sturges, Scott, Rice and square root. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/histogram/bin-rules.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=histogram%2Fbin-rules) - **[Density scale](https://westcoast-charts.com/examples/view/?example=histogram%2Fdensity)** — Free Core. normalize 'density': two groups of different size become comparable areas. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/histogram/density.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=histogram%2Fdensity) ### Bubble - **[Simple bubble](https://westcoast-charts.com/gallery/bubble/simple-bubble/)** — Free Core. Three product groups by price, rating and sales. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/bubble/simple-bubble.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/bubble/simple-bubble/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=bubble%2Fsimple-bubble) - **[Shaded bubble](https://westcoast-charts.com/gallery/bubble/3d-bubble/)** — Free Core. Bubbles with a radial gradient for a spherical look. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/bubble/3d-bubble.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/bubble/3d-bubble/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=bubble%2F3d-bubble) ### Scatter - **[Basic scatter](https://westcoast-charts.com/gallery/scatter/scatter-basic/)** — Free Core. Height against weight for three groups. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/scatter/scatter-basic.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/scatter/scatter-basic/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=scatter%2Fscatter-basic) - **[Datetime scatter](https://westcoast-charts.com/gallery/scatter/scatter-datetime/)** — Free Core. Incidents over time by severity. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/scatter/scatter-datetime.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/scatter/scatter-datetime/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=scatter%2Fscatter-datetime) - **[Image markers](https://westcoast-charts.com/gallery/scatter/scatter-images/)** — Free Core. Scatter points drawn as our own generated icon images. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/scatter/scatter-images.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/scatter/scatter-images/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=scatter%2Fscatter-images) - **[Scatter with jitter](https://westcoast-charts.com/gallery/scatter/scatter-with-jitter/)** — Free Core. Discrete ratings jittered so overlapping points stay visible. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/scatter/scatter-with-jitter.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/scatter/scatter-with-jitter/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=scatter%2Fscatter-with-jitter) - **[Large scatter](https://westcoast-charts.com/gallery/scatter/scatter-canvas-renderer/)** — Free Core. 60 000 points on canvas with xy zoom. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/scatter/scatter-canvas-renderer.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/scatter/scatter-canvas-renderer/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=scatter%2Fscatter-canvas-renderer) ### Heatmap - **[Basic heatmap](https://westcoast-charts.com/gallery/heatmap/basic/)** — Free Core. Orders by weekday and hour. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/heatmap/basic.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/heatmap/basic/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=heatmap%2Fbasic) - **[One colour per row](https://westcoast-charts.com/gallery/heatmap/multiple-color/)** — Free Core. Each metric row gets its own colour ramp. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/heatmap/multiple-color.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/heatmap/multiple-color/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=heatmap%2Fmultiple-color) - **[Colour ranges](https://westcoast-charts.com/gallery/heatmap/color-range/)** — Free Core. Named value ranges with their own colours, negatives included. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/heatmap/color-range.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/heatmap/color-range/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=heatmap%2Fcolor-range) - **[Gradient legend](https://westcoast-charts.com/gallery/heatmap/gradient-legend/)** — Free Core. A continuous colour scale with a gradient legend bar. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/heatmap/gradient-legend.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/heatmap/gradient-legend/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=heatmap%2Fgradient-legend) - **[Round cells](https://westcoast-charts.com/gallery/heatmap/rounded/)** — Free Core. Circular cells with value labels. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/heatmap/rounded.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/heatmap/rounded/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=heatmap%2Frounded) - **[Honeycomb](https://westcoast-charts.com/gallery/heatmap/honeycomb/)** — Free Core. Hexagonal cells in offset rows. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/heatmap/honeycomb.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/heatmap/honeycomb/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=heatmap%2Fhoneycomb) - **[Heatmap drilldown](https://westcoast-charts.com/gallery/heatmap/heatmap-with-drilldown/)** — Free Core. Click a week/day cell to see its hours. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/heatmap/heatmap-with-drilldown.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/heatmap/heatmap-with-drilldown/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=heatmap%2Fheatmap-with-drilldown) - **[Continuous time heatmap](https://westcoast-charts.com/gallery/heatmap/continuous-datetime/)** — Free Core. Load per 15-minute bucket across a day for several servers, on a datetime x axis with centred labels (heatmap wcc.centerTimeLabels). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/heatmap/continuous-datetime.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/heatmap/continuous-datetime/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=heatmap%2Fcontinuous-datetime) - **[Calendar heatmap](https://westcoast-charts.com/gallery/heatmap/calendar-heatmap/)** — Free Core. A year of daily commits in a contribution calendar. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/heatmap/calendar-heatmap.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/heatmap/calendar-heatmap/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=heatmap%2Fcalendar-heatmap) - **[Dense heatmap](https://westcoast-charts.com/gallery/heatmap/heatmap-canvas-renderer/)** — Free Core. A 60 × 100 matrix. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/heatmap/heatmap-canvas-renderer.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/heatmap/heatmap-canvas-renderer/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=heatmap%2Fheatmap-canvas-renderer) - **[Calendar: aggregating busy days](https://westcoast-charts.com/examples/view/?example=heatmap%2Fcalendar-aggregate)** — Free Core. Several on-call pages per day folded into one cell: sum, max, min, mean and last value side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/heatmap/calendar-aggregate.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=heatmap%2Fcalendar-aggregate) ### Treemap - **[Basic treemap](https://westcoast-charts.com/gallery/treemap/basic/)** — Free Core. Cloud spend by service. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/treemap/basic.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/treemap/basic/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=treemap%2Fbasic) - **[Multi-series treemap](https://westcoast-charts.com/gallery/treemap/multi-dimensional/)** — Free Core. Two series laid out as groups. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/treemap/multi-dimensional.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/treemap/multi-dimensional/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=treemap%2Fmulti-dimensional) - **[Colour scale](https://westcoast-charts.com/gallery/treemap/color-scale/)** — Free Core. Tiles coloured by change, red to green. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/treemap/color-scale.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/treemap/color-scale/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=treemap%2Fcolor-scale) - **[Distributed treemap](https://westcoast-charts.com/gallery/treemap/distributed/)** — Free Core. One colour per tile. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/treemap/distributed.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/treemap/distributed/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=treemap%2Fdistributed) - **[Treemap drilldown](https://westcoast-charts.com/gallery/treemap/treemap-with-drilldown/)** — Free Core. Click a group to zoom in; the breadcrumb returns. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/treemap/treemap-with-drilldown.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/treemap/treemap-with-drilldown/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=treemap%2Ftreemap-with-drilldown) - **[Nested market map](https://westcoast-charts.com/gallery/treemap/nested-market-map/)** — Free Core. Sectors and companies sized by market cap, coloured by daily change, dark-friendly. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/treemap/nested-market-map.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/treemap/nested-market-map/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=treemap%2Fnested-market-map) - **[Treemap ⇄ sunburst morph](https://westcoast-charts.com/gallery/treemap/treemap-sunburst-morph/)** — Free Core. The same hierarchy animates between treemap and sunburst. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/treemap/treemap-sunburst-morph.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/treemap/treemap-sunburst-morph/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=treemap%2Ftreemap-sunburst-morph) - **[Nested headers: alignment and breadcrumb](https://westcoast-charts.com/examples/view/?example=treemap%2Fnested-header-alignment)** — Free Core. Group headers centred, right-aligned, or set per level; the zoom breadcrumb sits top right. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/treemap/nested-header-alignment.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=treemap%2Fnested-header-alignment) - **[Nested headers left, breadcrumb top left](https://westcoast-charts.com/examples/view/?example=treemap%2Fnested-headers-left-breadcrumb-top-left)** — Free Core. A three-level research budget: group headers read from the left like a document outline (parents and per level), and the zoom breadcrumb sits top left where the eye starts. Click a programme to zoom. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/treemap/nested-headers-left-breadcrumb-top-left.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=treemap%2Fnested-headers-left-breadcrumb-top-left) - **[Gradient legend alignment](https://westcoast-charts.com/examples/view/?example=treemap%2Fgradient-legend-alignment)** — Free Core. The colour bar placed at the start, centre or end of the plot. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/treemap/gradient-legend-alignment.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=treemap%2Fgradient-legend-alignment) ### Sunburst - **[Basic sunburst](https://westcoast-charts.com/gallery/sunburst/basic/)** — Free Core. Budget by division, team and line item. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/sunburst/basic.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sunburst/basic/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=sunburst%2Fbasic) - **[From a drilldown config](https://westcoast-charts.com/gallery/sunburst/from-drilldown/)** — Free Core. Rings built from drilldown references instead of nested data. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/sunburst/from-drilldown.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sunburst/from-drilldown/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=sunburst%2Ffrom-drilldown) - **[Semi-circle sunburst](https://westcoast-charts.com/gallery/sunburst/semi-circle/)** — Free Core. Half-circle rings for a compact header chart. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/sunburst/semi-circle.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sunburst/semi-circle/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=sunburst%2Fsemi-circle) ### Icicle - **[Basic icicle](https://westcoast-charts.com/gallery/icicle/basic/)** — Free Core. Headcount by org level; click to zoom. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/icicle/basic.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/icicle/basic/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=icicle%2Fbasic) - **[Flame graph](https://westcoast-charts.com/gallery/icicle/flame-graph/)** — Free Core. CPU samples as an upward flame graph. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/icicle/flame-graph.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/icicle/flame-graph/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=icicle%2Fflame-graph) - **[Vertical labels](https://westcoast-charts.com/gallery/icicle/vertical-labels/)** — Free Core. Narrow tiles with rotated labels. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/icicle/vertical-labels.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/icicle/vertical-labels/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=icicle%2Fvertical-labels) - **[From a drilldown config](https://westcoast-charts.com/gallery/icicle/from-drilldown/)** — Free Core. Partition built from drilldown references, laid out left to right. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/icicle/from-drilldown.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/icicle/from-drilldown/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=icicle%2Ffrom-drilldown) - **[Sorted, growing to the right](https://westcoast-charts.com/examples/view/?example=icicle%2Fsorted-from-the-left)** — Free Core. Root on the left (direction 'left'), siblings sorted by value, labels right-aligned with values. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/icicle/sorted-from-the-left.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=icicle%2Fsorted-from-the-left) - **[Ragged tree, strict partition](https://westcoast-charts.com/examples/view/?example=icicle%2Fragged-strict)** — Free Core. Parents carry their own totals ('strict' leaves the unexplained rest empty), short branches extend to the edge, labels never rotate. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/icicle/ragged-strict.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=icicle%2Fragged-strict) ### Unit & pictogram - **[Pictogram population](https://westcoast-charts.com/gallery/unit/pictogram-population/)** — Free Core. People pictograms, one figure = 1 million residents. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/pictogram-population.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/pictogram-population/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fpictogram-population) - **[Parliament](https://westcoast-charts.com/gallery/unit/parliament/)** — Free Core. A hemicycle of 300 seats; parties are contiguous wedges. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/parliament.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/parliament/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fparliament) - **[Workforce clusters](https://westcoast-charts.com/gallery/unit/workforce-clusters/)** — Free Core. One sunflower cluster per department with external labels. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/workforce-clusters.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/workforce-clusters/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fworkforce-clusters) - **[Population explorer](https://westcoast-charts.com/gallery/unit/population-explorer/)** — Free Core. Switch the grouping; the same marks fly to their new clusters. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/population-explorer.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/population-explorer/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fpopulation-explorer) - **[City bubbles](https://westcoast-charts.com/gallery/unit/city-bubbles/)** — Free Core. Each city is one mark sized by population, packed by region. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/city-bubbles.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/city-bubbles/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fcity-bubbles) - **[Heart donors](https://westcoast-charts.com/gallery/unit/heart-donors/)** — Free Core. Donors fill a heart outline from the bottom up. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/heart-donors.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/heart-donors/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fheart-donors) - **[Globe population](https://westcoast-charts.com/gallery/unit/globe-population/)** — Free Core. Units arranged in a globe outline. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/globe-population.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/globe-population/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fglobe-population) - **[Pictogram crowd](https://westcoast-charts.com/gallery/unit/pictogram-crowd/)** — Free Core. A packed crowd of 500 figures, minority in the centre. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/pictogram-crowd.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/pictogram-crowd/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fpictogram-crowd) - **[Logo-shaped story](https://westcoast-charts.com/gallery/unit/brand-logo-story/)** — Free Core. Customers re-form from clusters into a brand mark (our own wave logo). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/brand-logo-story.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/brand-logo-story/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fbrand-logo-story) - **[Shape forge](https://westcoast-charts.com/gallery/unit/logo-forge/)** — Free Core. Pick an outline; the same marks re-form into it. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/logo-forge.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/logo-forge/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Flogo-forge) - **[Pipeline stages](https://westcoast-charts.com/gallery/unit/pipeline-stages/)** — Free Core. Deals stacked as columns per stage. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/pipeline-stages.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/pipeline-stages/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fpipeline-stages) - **[Review ratings](https://westcoast-charts.com/gallery/unit/review-ratings/)** — Free Core. Star pictograms per rating, one star = 10 reviews. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/review-ratings.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/review-ratings/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Freview-ratings) - **[Response times](https://westcoast-charts.com/gallery/unit/response-times/)** — Free Core. Each ticket is a dot on a real time axis, swarmed per channel. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/response-times.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/response-times/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fresponse-times) - **[Battery storage](https://westcoast-charts.com/gallery/unit/battery-storage/)** — Free Core. Storage capacity fills a battery outline. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/battery-storage.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/battery-storage/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fbattery-storage) - **[Bring your own shape](https://westcoast-charts.com/gallery/unit/bring-your-own-shape/)** — Free Core. A mountain outline drawn from plain coordinates with shapeFrom(). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/bring-your-own-shape.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/bring-your-own-shape/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fbring-your-own-shape) - **[Silhouette gallery](https://westcoast-charts.com/gallery/unit/silhouette-gallery/)** — Free Core. Every outline in the WCC shapes kit, filled with 120 marks. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/silhouette-gallery.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/silhouette-gallery/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fsilhouette-gallery) - **[House tenure](https://westcoast-charts.com/gallery/unit/house-tenure/)** — Free Core. Households inside a house outline. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/house-tenure.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/house-tenure/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fhouse-tenure) - **[Human workforce](https://westcoast-charts.com/gallery/unit/human-workforce/)** — Free Core. Staff fill a person silhouette. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/human-workforce.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/human-workforce/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fhuman-workforce) - **[Tree canopy](https://westcoast-charts.com/gallery/unit/tree-canopy/)** — Free Core. Street trees by species fill a tree outline. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/tree-canopy.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/tree-canopy/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Ftree-canopy) - **[Solar generation](https://westcoast-charts.com/gallery/unit/solar-generation/)** — Free Core. Monthly output as a bolt-shaped unit chart. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/solar-generation.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/solar-generation/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fsolar-generation) - **[Water silhouette](https://westcoast-charts.com/gallery/unit/water-silhouette/)** — Free Core. Water use fills a drop. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/water-silhouette.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/water-silhouette/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fwater-silhouette) - **[Flight cabins](https://westcoast-charts.com/gallery/unit/flight-cabins/)** — Free Core. Seats by cabin, nose to tail, inside a plane outline. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/flight-cabins.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/flight-cabins/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fflight-cabins) - **[Rocket payloads](https://westcoast-charts.com/gallery/unit/rocket-payloads/)** — Free Core. Payload mass by customer inside a rocket. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/rocket-payloads.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/rocket-payloads/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Frocket-payloads) - **[Shield security](https://westcoast-charts.com/gallery/unit/shield-security/)** — Free Core. Blocked threats fill a shield. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/shield-security.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/shield-security/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fshield-security) - **[Support automation](https://westcoast-charts.com/gallery/unit/support-automation/)** — Free Core. Tickets move between human and bot handling as automation rolls out. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/support-automation.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/support-automation/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fsupport-automation) - **[Store locations](https://westcoast-charts.com/gallery/unit/store-locations/)** — Free Core. Stores as house marks on real x/y coordinates, coloured by format. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/store-locations.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/store-locations/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fstore-locations) - **[Target conversion](https://westcoast-charts.com/gallery/unit/target-conversion/)** — Free Core. Visitors fill a target from the centre out; converters sit in the bull. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/target-conversion.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/target-conversion/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Ftarget-conversion) - **[Pyramid hierarchy](https://westcoast-charts.com/gallery/unit/pyramid-hierarchy/)** — Free Core. Staff by level in a pyramid outline, juniors at the base. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/pyramid-hierarchy.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/pyramid-hierarchy/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fpyramid-hierarchy) - **[Compliance checks](https://westcoast-charts.com/gallery/unit/compliance-checks/)** — Free Core. A waffle of 100 checks with stroke-only tick pictograms (pictogram outline). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/compliance-checks.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/compliance-checks/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fcompliance-checks) - **[Connection types](https://westcoast-charts.com/gallery/unit/connection-types/)** — Free Core. One mini waffle per connection type (of 100 homes). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/connection-types.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/connection-types/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fconnection-types) - **[Startup funding](https://westcoast-charts.com/gallery/unit/startup-funding/)** — Free Core. Each startup is a bubble sized by funding, packed and coloured by stage. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/startup-funding.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/startup-funding/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fstartup-funding) - **[Team roster](https://westcoast-charts.com/gallery/unit/team-roster/)** — Free Core. One named mark per person; hover shows who. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/team-roster.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/team-roster/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fteam-roster) - **[Marathon storyboard](https://westcoast-charts.com/gallery/unit/marathon-storyboard/)** — Free Core. Play a race story (start, halfway, finish); the marks regroup per frame, with transport, scrubber and captions. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/marathon-storyboard.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/marathon-storyboard/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fmarathon-storyboard) - **[Gather motion presets](https://westcoast-charts.com/examples/view/?example=unit%2Fgather-motion)** — Free Core. The same crowd regrouping every few seconds with snappy and crisp springs, a tween with fade-in, and identity transitions. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/gather-motion.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fgather-motion) - **[Pictogram fit and fallback](https://westcoast-charts.com/examples/view/?example=unit%2Fpictogram-fit)** — Free Core. A wide bus glyph fitted 'contain', 'width' and 'height'; an unknown mark falls back to squares. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/pictogram-fit.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fpictogram-fit) - **[Columns sized to fit](https://westcoast-charts.com/examples/view/?example=unit%2Fcolumns-auto-size)** — Free Core. Column layout with columns.size 'auto': the tallest stack fills the height. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/columns-auto-size.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fcolumns-auto-size) - **[Jitter lanes and linear mark size](https://westcoast-charts.com/examples/view/?example=unit%2Fjitter-lanes-and-linear-size)** — Free Core. Scatter lanes spread by deterministic jitter instead of swarm; marks sized by value with an 'area' and a 'linear' scale. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/jitter-lanes-and-linear-size.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fjitter-lanes-and-linear-size) - **[Vertical swarm lanes](https://westcoast-charts.com/examples/view/?example=unit%2Fvertical-lanes)** — Free Core. scatter.orientation 'vertical': each lane becomes a column, the value axis runs up; swarm and jitter spread side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/vertical-lanes.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=unit%2Fvertical-lanes) ### Beeswarm - **[Life expectancy swarm](https://westcoast-charts.com/gallery/beeswarm/life-expectancy-swarm/)** — Free Core. One dot per country, swarmed by continent, horizontal. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/beeswarm/life-expectancy-swarm.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/beeswarm/life-expectancy-swarm/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=beeswarm%2Flife-expectancy-swarm) - **[Body mass by species](https://westcoast-charts.com/gallery/beeswarm/body-mass-by-species/)** — Free Core. Vertical swarms per species with a median tick. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/beeswarm/body-mass-by-species.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/beeswarm/body-mass-by-species/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=beeswarm%2Fbody-mass-by-species) - **[Salary by department](https://westcoast-charts.com/gallery/beeswarm/salary-by-department/)** — Free Core. Dots coloured by value on a continuous scale. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/beeswarm/salary-by-department.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/beeswarm/salary-by-department/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=beeswarm%2Fsalary-by-department) - **[Game scores, sized](https://westcoast-charts.com/gallery/beeswarm/game-scores-bubble/)** — Free Core. Matches per game mode, x = score, bubble = players. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/beeswarm/game-scores-bubble.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/beeswarm/game-scores-bubble/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=beeswarm%2Fgame-scores-bubble) - **[Half swarms](https://westcoast-charts.com/examples/view/?example=beeswarm%2Fhalf-swarms)** — Free Core. Dots spread to one side only: side 'left' and 'right' on columns, 'top' and 'bottom' on rows. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/beeswarm/half-swarms.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=beeswarm%2Fhalf-swarms) ### Waffle - **[Energy mix](https://westcoast-charts.com/gallery/waffle/energy-mix/)** — Free Core. 100 cells, one per percent of generation. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/waffle/energy-mix.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/waffle/energy-mix/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=waffle%2Fenergy-mix) - **[Urban small multiples](https://westcoast-charts.com/gallery/waffle/urban-small-multiples/)** — Free Core. One mini waffle per measure, out of 100 residents. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/waffle/urban-small-multiples.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/waffle/urban-small-multiples/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=waffle%2Furban-small-multiples) ### Slope - **[Basic slope](https://westcoast-charts.com/gallery/slope/basic/)** — Free Core. Satisfaction per product area, 2025 vs 2026. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/slope/basic.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/slope/basic/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=slope%2Fbasic) - **[Multi group](https://westcoast-charts.com/gallery/slope/multi-group/)** — Free Core. Three periods with two highlighted regions. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/slope/multi-group.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/slope/multi-group/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=slope%2Fmulti-group) ### Pie & donut - **[Simple pie](https://westcoast-charts.com/gallery/pie/simple-pie/)** — Free Core. Traffic share by channel. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/pie/simple-pie.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/pie/simple-pie/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=pie%2Fsimple-pie) - **[Simple donut](https://westcoast-charts.com/gallery/pie/simple-donut/)** — Free Core. Donut with total in the hole. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/pie/simple-donut.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/pie/simple-donut/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=pie%2Fsimple-donut) - **[Rounded donut](https://westcoast-charts.com/gallery/pie/rounded-donut/)** — Free Core. Round caps on donut segments. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/pie/rounded-donut.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/pie/rounded-donut/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=pie%2Frounded-donut) - **[Rounded, spaced](https://westcoast-charts.com/gallery/pie/rounded-spaced/)** — Free Core. Segments with parallel gaps and rounded corners (pie wcc.segmentGap / segmentRadius). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/pie/rounded-spaced.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/pie/rounded-spaced/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=pie%2Frounded-spaced) - **[Monochrome pie](https://westcoast-charts.com/gallery/pie/monochrome-pie/)** — Free Core. Shades of one colour. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/pie/monochrome-pie.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/pie/monochrome-pie/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=pie%2Fmonochrome-pie) - **[Gradient donut](https://westcoast-charts.com/gallery/pie/gradient-donut/)** — Free Core. Gradient-filled segments. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/pie/gradient-donut.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/pie/gradient-donut/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=pie%2Fgradient-donut) - **[Pattern donut](https://westcoast-charts.com/gallery/pie/donut-with-pattern/)** — Free Core. Pattern fills, readable without colour. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/pie/donut-with-pattern.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/pie/donut-with-pattern/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=pie%2Fdonut-with-pattern) - **[Donut update](https://westcoast-charts.com/gallery/pie/donut-update/)** — Free Core. Buttons add, remove and randomise segments. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/pie/donut-update.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/pie/donut-update/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=pie%2Fdonut-update) - **[Pie with image fills](https://westcoast-charts.com/gallery/pie/pie-with-image/)** — Free Core. Each slice filled with our own small SVG pattern tile. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/pie/pie-with-image.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/pie/pie-with-image/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=pie%2Fpie-with-image) - **[Donut drilldown](https://westcoast-charts.com/gallery/pie/donut-with-drilldown/)** — Free Core. Click a slice to see its breakdown; the breadcrumb goes back. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/pie/donut-with-drilldown.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/pie/donut-with-drilldown/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=pie%2Fdonut-with-drilldown) ### Radial bar - **[Circle chart](https://westcoast-charts.com/gallery/radialbar/circle-chart/)** — Free Core. One ring with the value in the centre. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/radialbar/circle-chart.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radialbar/circle-chart/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radialbar%2Fcircle-chart) - **[Multiple rings](https://westcoast-charts.com/gallery/radialbar/circle-chart-multiple/)** — Free Core. Four rings with a total. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/radialbar/circle-chart-multiple.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radialbar/circle-chart-multiple/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radialbar%2Fcircle-chart-multiple) - **[Custom angle](https://westcoast-charts.com/gallery/radialbar/circle-custom-angle/)** — Free Core. A 270° sweep with the legend beside the ring starts. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/radialbar/circle-custom-angle.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radialbar/circle-custom-angle/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radialbar%2Fcircle-custom-angle) - **[Gradient ring](https://westcoast-charts.com/gallery/radialbar/circle-gradient/)** — Free Core. Gradient fill along the ring. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/radialbar/circle-gradient.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radialbar/circle-gradient/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radialbar%2Fcircle-gradient) - **[Stroked gauge](https://westcoast-charts.com/gallery/radialbar/stroked-gauge/)** — Free Core. A dashed 270° gauge. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/radialbar/stroked-gauge.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radialbar/stroked-gauge/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radialbar%2Fstroked-gauge) - **[Semi circle](https://westcoast-charts.com/gallery/radialbar/semi-circle-chart/)** — Free Core. Half ring. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/radialbar/semi-circle-chart.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radialbar/semi-circle-chart/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radialbar%2Fsemi-circle-chart) - **[Ring with icon](https://westcoast-charts.com/gallery/radialbar/circle-chart-with-image/)** — Free Core. Our own icon in the centre of the ring. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/radialbar/circle-chart-with-image.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radialbar/circle-chart-with-image/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radialbar%2Fcircle-chart-with-image) ### Gauge - **[Basic gauge](https://westcoast-charts.com/gallery/gauge/basic-gauge/)** — Free Core. Arc gauge on a 0–100 domain. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/gauge/basic-gauge.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gauge/basic-gauge/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=gauge%2Fbasic-gauge) - **[Bands](https://westcoast-charts.com/gallery/gauge/gauge-with-bands/)** — Free Core. Threshold bands with gaps. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/gauge/gauge-with-bands.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gauge/gauge-with-bands/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=gauge%2Fgauge-with-bands) - **[Custom label](https://westcoast-charts.com/gallery/gauge/gauge-with-custom-label/)** — Free Core. Custom domain with a formatted centre label. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/gauge/gauge-with-custom-label.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gauge/gauge-with-custom-label/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=gauge%2Fgauge-with-custom-label) - **[Ticks](https://westcoast-charts.com/gallery/gauge/gauge-with-ticks/)** — Free Core. Major and minor ticks with labels. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/gauge/gauge-with-ticks.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gauge/gauge-with-ticks/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=gauge%2Fgauge-with-ticks) - **[Needle gauge](https://westcoast-charts.com/gallery/gauge/needle-gauge/)** — Free Core. Pointer with bands as track. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/gauge/needle-gauge.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gauge/needle-gauge/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=gauge%2Fneedle-gauge) - **[Live needle](https://westcoast-charts.com/gallery/gauge/live-needle-gauge/)** — Free Core. The needle follows a live value; no overshoot on updates. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/gauge/live-needle-gauge.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gauge/live-needle-gauge/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=gauge%2Flive-needle-gauge) - **[Semi circle gauge](https://westcoast-charts.com/gallery/gauge/semi-circle-gauge/)** — Free Core. Half dial with a below-zero domain. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/gauge/semi-circle-gauge.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gauge/semi-circle-gauge/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=gauge%2Fsemi-circle-gauge) - **[Band caps and inside ticks](https://westcoast-charts.com/examples/view/?example=gauge%2Fband-caps-inside-ticks)** — Free Core. Needle gauges with round and square band ends; major and minor ticks drawn inside the arc. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/gauge/band-caps-inside-ticks.html?lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=gauge%2Fband-caps-inside-ticks) ### Radar - **[Basic radar](https://westcoast-charts.com/gallery/radar/basic-radar/)** — Free Core. One profile across six skills. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/radar/basic-radar.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radar/basic-radar/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radar%2Fbasic-radar) - **[Multiple series](https://westcoast-charts.com/gallery/radar/radar-multiple-series/)** — Free Core. Three car models compared. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/radar/radar-multiple-series.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radar/radar-multiple-series/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radar%2Fradar-multiple-series) - **[Polygon fill](https://westcoast-charts.com/gallery/radar/radar-with-polygon-fill/)** — Free Core. Alternating polygon background bands. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/radar/radar-with-polygon-fill.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radar/radar-with-polygon-fill/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radar%2Fradar-with-polygon-fill) ### Polar area - **[Basic polar area](https://westcoast-charts.com/gallery/polar-area/basic-polar-area/)** — Free Core. Wind frequency by direction. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/polar-area/basic-polar-area.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/polar-area/basic-polar-area/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=polar-area%2Fbasic-polar-area) - **[Monochrome polar area](https://westcoast-charts.com/gallery/polar-area/polar-area-monochrome/)** — Free Core. Shades of one colour. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/polar-area/polar-area-monochrome.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/polar-area/polar-area-monochrome/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=polar-area%2Fpolar-area-monochrome) ### Sparklines - **[Sparkline tiles](https://westcoast-charts.com/gallery/sparklines/basic/)** — Free Core. KPI tiles with line, area and bar sparklines. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/sparklines/basic.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sparklines/basic/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=sparklines%2Fbasic) ## Dashboards & interaction ### Crossfilter dashboards - **[Crossfilter dashboard](https://westcoast-charts.com/gallery/interactivity/crossfilter-dashboard/)** — Free Core. Brush a date range on the timeline; the region and product charts refilter, and clicking a bar filters the others too. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/interactivity/crossfilter-dashboard.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/interactivity/crossfilter-dashboard/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=interactivity%2Fcrossfilter-dashboard) - **[Crossfilter categorical](https://westcoast-charts.com/gallery/interactivity/crossfilter-categorical/)** — Free Core. Click a region, a product or a channel; the other charts show only the matching records. Shift-click adds to the selection. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/interactivity/crossfilter-categorical.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/interactivity/crossfilter-categorical/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=interactivity%2Fcrossfilter-categorical) - **[Filter by dashboard](https://westcoast-charts.com/gallery/highlight-filter/filter-by-dashboard/)** — Free Core. Pick a sales channel; all three charts show how much of each total came through it, against the faded whole. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/filter-by-dashboard.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/filter-by-dashboard/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=highlight-filter%2Ffilter-by-dashboard) - **[Realtime monitoring](https://westcoast-charts.com/gallery/dashboards/realtime-monitoring-dashboard/)** — Free Core. Live streams update every second; gauges follow. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/dashboards/realtime-monitoring-dashboard.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/dashboards/realtime-monitoring-dashboard/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=dashboards%2Frealtime-monitoring-dashboard) - **[Sales analytics](https://westcoast-charts.com/gallery/dashboards/sales-analytics-dashboard/)** — Free Core. KPIs, revenue trend, channel mix and top products. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/dashboards/sales-analytics-dashboard.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/dashboards/sales-analytics-dashboard/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=dashboards%2Fsales-analytics-dashboard) - **[Web analytics](https://westcoast-charts.com/gallery/dashboards/web-analytics-dashboard/)** — Free Core. Visitors, sources, devices, pages and a sparkline row. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/dashboards/web-analytics-dashboard.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/dashboards/web-analytics-dashboard/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=dashboards%2Fweb-analytics-dashboard) - **[Dark mode dashboard](https://westcoast-charts.com/gallery/dashboards/dark-mode-dashboard/)** — Free Core. An operations dashboard designed for dark mode. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/dashboards/dark-mode-dashboard.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/dashboards/dark-mode-dashboard/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=dashboards%2Fdark-mode-dashboard) ### Custom series - **[Bullet](https://westcoast-charts.com/gallery/custom-series/bullet/)** — Free Core. Actual bars against target ticks and qualitative ranges. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/custom-series/bullet.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/custom-series/bullet/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=custom-series%2Fbullet) - **[Lollipop](https://westcoast-charts.com/gallery/custom-series/lollipop/)** — Free Core. Thin stems with round heads (bar wcc.mark: lollipop). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/custom-series/lollipop.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/custom-series/lollipop/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=custom-series%2Flollipop) - **[Ring stem](https://westcoast-charts.com/gallery/custom-series/ring-stem/)** — Free Core. Stems topped with hollow rings, here horizontal (bar wcc.mark: ringStem). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/custom-series/ring-stem.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/custom-series/ring-stem/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=custom-series%2Fring-stem) ### Interactivity - **[Measure ruler](https://westcoast-charts.com/gallery/interactivity/measure-ruler/)** — Free Core. Click two points to measure the change between them. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/interactivity/measure-ruler.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/interactivity/measure-ruler/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=interactivity%2Fmeasure-ruler) - **[Annotation authoring](https://westcoast-charts.com/gallery/interactivity/annotation-authoring/)** — Free Core. Click the chart to pin notes; remove the last one. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/interactivity/annotation-authoring.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/interactivity/annotation-authoring/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=interactivity%2Fannotation-authoring) ### Narrative & state - **[Scrollytelling](https://westcoast-charts.com/gallery/narrative-state/scrollytelling/)** — Free Core. Scroll the story; the sticky chart zooms and annotates per step, with dot navigation. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/narrative-state/scrollytelling.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/narrative-state/scrollytelling/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=narrative-state%2Fscrollytelling) - **[Shareable views](https://westcoast-charts.com/gallery/narrative-state/shareable-views/)** — Free Core. Named views set the zoom window and hidden series; the current view becomes a share token, and a link with the token restores it. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/narrative-state/shareable-views.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/narrative-state/shareable-views/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=narrative-state%2Fshareable-views) - **[Undo / redo](https://westcoast-charts.com/gallery/narrative-state/undo-redo/)** — Free Core. Zoom, hide series or load new data, then step back with the toolbar, the buttons or Ctrl/Cmd+Z. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/narrative-state/undo-redo.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/narrative-state/undo-redo/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=narrative-state%2Fundo-redo) ### Trellis - **[Revenue by region](https://westcoast-charts.com/gallery/trellis/revenue-by-region/)** — Free Core. One area panel per region on a shared y scale, synced crosshair, latest value in each header. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/revenue-by-region.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/revenue-by-region/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=trellis%2Frevenue-by-region) - **[Department by quarter](https://westcoast-charts.com/gallery/trellis/department-by-quarter/)** — Free Core. Tidy rows (department, quarter, spend) become one column panel per department. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/department-by-quarter.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/department-by-quarter/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=trellis%2Fdepartment-by-quarter) - **[Stock performance grid](https://westcoast-charts.com/gallery/trellis/stock-performance-grid/)** — Free Core. Nine tickers on independent scales; a panel() hook colours each green or red by its change. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/stock-performance-grid.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/stock-performance-grid/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=trellis%2Fstock-performance-grid) - **[Distribution by cohort](https://westcoast-charts.com/gallery/trellis/distribution-by-cohort/)** — Free Core. Session-length histograms per signup cohort; the plugin gives every panel the same bins. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/distribution-by-cohort.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/distribution-by-cohort/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=trellis%2Fdistribution-by-cohort) - **[KPI gauge grid](https://westcoast-charts.com/gallery/trellis/kpi-gauge-grid/)** — Free Core. Eight gauges from one definition, sharing the same bands. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/kpi-gauge-grid.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/kpi-gauge-grid/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=trellis%2Fkpi-gauge-grid) - **[Clinical reference bands](https://westcoast-charts.com/gallery/trellis/clinical-reference-bands/)** — Free Core. Lab values over 14 days; each panel shades its own normal range with scoped annotations. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/clinical-reference-bands.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/clinical-reference-bands/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=trellis%2Fclinical-reference-bands) - **[Panel promotion](https://westcoast-charts.com/gallery/trellis/panel-promotion/)** — Free Core. Click a panel header to expand it; Esc or the header again restores the grid. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/panel-promotion.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/panel-promotion/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=trellis%2Fpanel-promotion) - **[Metrics by unit](https://westcoast-charts.com/gallery/trellis/metrics-by-unit/)** — Free Core. Six sensors with their own units: independent y scales and per-panel formatters. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/metrics-by-unit.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/metrics-by-unit/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=trellis%2Fmetrics-by-unit) - **[Top and bottom markets](https://westcoast-charts.com/gallery/trellis/top-and-bottom-markets/)** — Free Core. The three best and three worst markets by growth, via an explicit panel order. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/top-and-bottom-markets.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/top-and-bottom-markets/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=trellis%2Ftop-and-bottom-markets) - **[Traffic by country](https://westcoast-charts.com/gallery/trellis/traffic-by-country/)** — Free Core. 100 % stacked device split per country, one shared legend for all panels. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/traffic-by-country.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/traffic-by-country/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=trellis%2Ftraffic-by-country) - **[Activity by location](https://westcoast-charts.com/gallery/trellis/activity-by-location/)** — Free Core. Weekday × hour heatmaps per office on one shared colour scale. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/activity-by-location.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/activity-by-location/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=trellis%2Factivity-by-location) - **[IoT device health](https://westcoast-charts.com/gallery/trellis/iot-device-health/)** — Free Core. Battery per device; panel() turns a panel red and the header flags it when it ends below 70 %. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/iot-device-health.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/iot-device-health/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=trellis%2Fiot-device-health) - **[Task mix by team](https://westcoast-charts.com/gallery/trellis/task-mix-by-team/)** — Free Core. Task type split (Feature, Bug, Chore, Research) per team as donut panels with the same colour order. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/task-mix-by-team.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/task-mix-by-team/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=trellis%2Ftask-mix-by-team) ### Highlight filter - **[Column highlight](https://westcoast-charts.com/gallery/highlight-filter/column-highlight/)** — Free Core. Hovering a column dims the others; click keeps the selection. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/column-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/column-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=highlight-filter%2Fcolumn-highlight) - **[Stacked highlight](https://westcoast-charts.com/gallery/highlight-filter/stacked-highlight/)** — Free Core. Legend hover highlights one stack layer. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/stacked-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/stacked-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=highlight-filter%2Fstacked-highlight) - **[Line highlight](https://westcoast-charts.com/gallery/highlight-filter/line-highlight/)** — Free Core. Hover a legend entry or line; the rest fade. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/line-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/line-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=highlight-filter%2Fline-highlight) - **[Area highlight](https://westcoast-charts.com/gallery/highlight-filter/area-highlight/)** — Free Core. Legend hover highlights one area. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/area-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/area-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=highlight-filter%2Farea-highlight) - **[Funnel highlight](https://westcoast-charts.com/gallery/highlight-filter/funnel-highlight/)** — Free Core. Each stage shows the paid-campaign share of its users inside the whole stage. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/funnel-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/funnel-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=highlight-filter%2Ffunnel-highlight) - **[Pie highlight](https://westcoast-charts.com/gallery/highlight-filter/pie-highlight/)** — Free Core. Hover or click a slice: it lifts out and the others dim. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/pie-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/pie-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=highlight-filter%2Fpie-highlight) - **[Gauge highlight](https://westcoast-charts.com/gallery/highlight-filter/gauge-highlight/)** — Free Core. Each ring shows the night shift's part of the plant figure; switch shifts with the buttons. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/gauge-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/gauge-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=highlight-filter%2Fgauge-highlight) - **[Treemap highlight](https://westcoast-charts.com/gallery/highlight-filter/treemap-highlight/)** — Free Core. Each store tile shows its online part inside the faded whole; switch the measure with the buttons. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/treemap-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/treemap-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=highlight-filter%2Ftreemap-highlight) - **[Forecast highlight](https://westcoast-charts.com/gallery/highlight-filter/forecast-highlight/)** — Free Core. Forecast points are dashed and shaded apart from actuals. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/forecast-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/forecast-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=highlight-filter%2Fforecast-highlight) - **[Bar highlight](https://westcoast-charts.com/gallery/highlight-filter/bar-highlight/)** — Free Core. Hover a bar to darken it; others stay put. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/bar-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/bar-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=highlight-filter%2Fbar-highlight) ## Core features ### Drilldown - **[Drilldown lab](https://westcoast-charts.com/gallery/drilldown/overview/)** — Free Core. The drilldown plugin on bars, pie, treemap and lines. [Original sample](https://westcoast-charts.com/examples/samples/wcc/features/drilldown.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/drilldown/overview/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Fdrilldown) - **[Column drilldown](https://westcoast-charts.com/gallery/column/column-with-drilldown/)** — Free Core. Click a region to see its countries, then a country to see its cities. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/column-with-drilldown.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/column-with-drilldown/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Acolumn%2Fcolumn-with-drilldown) - **[Drilldown with zoom](https://westcoast-charts.com/gallery/column/column-drilldown-zoom/)** — Free Core. Weeks drill into hours; the hourly level is a zoomable time series. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/column-drilldown-zoom.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/column-drilldown-zoom/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Acolumn%2Fcolumn-drilldown-zoom) - **[Async drilldown](https://westcoast-charts.com/gallery/column/column-drilldown-async/)** — Free Core. Drilling loads the next level asynchronously; a loading bar shows while it arrives. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/column/column-drilldown-async.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/column/column-drilldown-async/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Acolumn%2Fcolumn-drilldown-async) - **[Line with drilldown](https://westcoast-charts.com/gallery/line/line-with-drilldown/)** — Free Core. Click a year to drill into its months; the breadcrumb or Backspace goes back. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/line/line-with-drilldown.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/line/line-with-drilldown/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Aline%2Fline-with-drilldown) - **[Donut drilldown](https://westcoast-charts.com/gallery/pie/donut-with-drilldown/)** — Free Core. Click a slice to see its breakdown; the breadcrumb goes back. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/pie/donut-with-drilldown.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/pie/donut-with-drilldown/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Apie%2Fdonut-with-drilldown) - **[Heatmap drilldown](https://westcoast-charts.com/gallery/heatmap/heatmap-with-drilldown/)** — Free Core. Click a week/day cell to see its hours. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/heatmap/heatmap-with-drilldown.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/heatmap/heatmap-with-drilldown/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Aheatmap%2Fheatmap-with-drilldown) - **[Treemap drilldown](https://westcoast-charts.com/gallery/treemap/treemap-with-drilldown/)** — Free Core. Click a group to zoom in; the breadcrumb returns. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/treemap/treemap-with-drilldown.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/treemap/treemap-with-drilldown/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Atreemap%2Ftreemap-with-drilldown) - **[From a drilldown config](https://westcoast-charts.com/gallery/sunburst/from-drilldown/)** — Free Core. Rings built from drilldown references instead of nested data. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/sunburst/from-drilldown.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sunburst/from-drilldown/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Asunburst%2Ffrom-drilldown) - **[From a drilldown config](https://westcoast-charts.com/gallery/icicle/from-drilldown/)** — Free Core. Partition built from drilldown references, laid out left to right. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/icicle/from-drilldown.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/icicle/from-drilldown/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Aicicle%2Ffrom-drilldown) ### Link & crossfilter - **[Crossfilter lab](https://westcoast-charts.com/gallery/link/crossfilter/)** — Free Core. The link plugin: brushing one chart filters the others. [Original sample](https://westcoast-charts.com/examples/samples/wcc/features/crossfilter.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/link/crossfilter/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Fcrossfilter) - **[Crossfilter dashboard](https://westcoast-charts.com/gallery/interactivity/crossfilter-dashboard/)** — Free Core. Brush a date range on the timeline; the region and product charts refilter, and clicking a bar filters the others too. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/interactivity/crossfilter-dashboard.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/interactivity/crossfilter-dashboard/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Ainteractivity%2Fcrossfilter-dashboard) - **[Crossfilter categorical](https://westcoast-charts.com/gallery/interactivity/crossfilter-categorical/)** — Free Core. Click a region, a product or a channel; the other charts show only the matching records. Shift-click adds to the selection. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/interactivity/crossfilter-categorical.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/interactivity/crossfilter-categorical/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Ainteractivity%2Fcrossfilter-categorical) - **[Synced charts](https://westcoast-charts.com/gallery/line/syncing-charts/)** — Free Core. Three stacked charts in one group share crosshair and tooltip. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/line/syncing-charts.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/line/syncing-charts/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Aline%2Fsyncing-charts) - **[Brush chart](https://westcoast-charts.com/gallery/line/brush-charts/)** — Free Core. A detail chart driven by a brush selection on an overview chart. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/line/brush-charts.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/line/brush-charts/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Aline%2Fbrush-charts) ### Highlight filter - **[Highlight filter lab](https://westcoast-charts.com/gallery/highlight-filter/overview/)** — Free Core. The highlight-filter plugin on every supported type. [Original sample](https://westcoast-charts.com/examples/samples/wcc/features/highlight-filter.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/overview/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Fhighlight-filter) - **[Filter by dashboard](https://westcoast-charts.com/gallery/highlight-filter/filter-by-dashboard/)** — Free Core. Pick a sales channel; all three charts show how much of each total came through it, against the faded whole. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/filter-by-dashboard.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/filter-by-dashboard/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Ahighlight-filter%2Ffilter-by-dashboard) - **[Column highlight](https://westcoast-charts.com/gallery/highlight-filter/column-highlight/)** — Free Core. Hovering a column dims the others; click keeps the selection. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/column-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/column-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Ahighlight-filter%2Fcolumn-highlight) - **[Stacked highlight](https://westcoast-charts.com/gallery/highlight-filter/stacked-highlight/)** — Free Core. Legend hover highlights one stack layer. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/stacked-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/stacked-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Ahighlight-filter%2Fstacked-highlight) - **[Line highlight](https://westcoast-charts.com/gallery/highlight-filter/line-highlight/)** — Free Core. Hover a legend entry or line; the rest fade. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/line-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/line-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Ahighlight-filter%2Fline-highlight) - **[Area highlight](https://westcoast-charts.com/gallery/highlight-filter/area-highlight/)** — Free Core. Legend hover highlights one area. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/area-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/area-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Ahighlight-filter%2Farea-highlight) - **[Funnel highlight](https://westcoast-charts.com/gallery/highlight-filter/funnel-highlight/)** — Free Core. Each stage shows the paid-campaign share of its users inside the whole stage. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/funnel-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/funnel-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Ahighlight-filter%2Ffunnel-highlight) - **[Pie highlight](https://westcoast-charts.com/gallery/highlight-filter/pie-highlight/)** — Free Core. Hover or click a slice: it lifts out and the others dim. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/pie-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/pie-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Ahighlight-filter%2Fpie-highlight) - **[Gauge highlight](https://westcoast-charts.com/gallery/highlight-filter/gauge-highlight/)** — Free Core. Each ring shows the night shift's part of the plant figure; switch shifts with the buttons. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/gauge-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/gauge-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Ahighlight-filter%2Fgauge-highlight) - **[Treemap highlight](https://westcoast-charts.com/gallery/highlight-filter/treemap-highlight/)** — Free Core. Each store tile shows its online part inside the faded whole; switch the measure with the buttons. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/treemap-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/treemap-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Ahighlight-filter%2Ftreemap-highlight) - **[Forecast highlight](https://westcoast-charts.com/gallery/highlight-filter/forecast-highlight/)** — Free Core. Forecast points are dashed and shaded apart from actuals. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/forecast-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/forecast-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Ahighlight-filter%2Fforecast-highlight) - **[Bar highlight](https://westcoast-charts.com/gallery/highlight-filter/bar-highlight/)** — Free Core. Hover a bar to darken it; others stay put. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/highlight-filter/bar-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/highlight-filter/bar-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Ahighlight-filter%2Fbar-highlight) ### Perspectives - **[Perspectives lab](https://westcoast-charts.com/gallery/perspectives/overview/)** — Free Core. Save a view, switch between views, share it as a link. [Original sample](https://westcoast-charts.com/examples/samples/wcc/features/perspectives.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/perspectives/overview/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Fperspectives) - **[Shareable views](https://westcoast-charts.com/gallery/narrative-state/shareable-views/)** — Free Core. Named views set the zoom window and hidden series; the current view becomes a share token, and a link with the token restores it. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/narrative-state/shareable-views.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/narrative-state/shareable-views/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Anarrative-state%2Fshareable-views) ### History / rewind - **[History & narrative lab](https://westcoast-charts.com/gallery/history/story/)** — Free Core. Rewind toolbar and recorded narrative frames. [Original sample](https://westcoast-charts.com/examples/samples/wcc/features/story.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/history/story/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Fstory) - **[Undo / redo](https://westcoast-charts.com/gallery/narrative-state/undo-redo/)** — Free Core. Zoom, hide series or load new data, then step back with the toolbar, the buttons or Ctrl/Cmd+Z. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/narrative-state/undo-redo.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/narrative-state/undo-redo/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Anarrative-state%2Fundo-redo) ### Storyboard - **[Storyboard lab](https://westcoast-charts.com/gallery/storyboard/overview/)** — Free Core. Scroll inside the card: each text block moves the chart to its view. [Original sample](https://westcoast-charts.com/examples/samples/wcc/features/storyboard.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/storyboard/overview/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Fstoryboard) - **[Scrollytelling](https://westcoast-charts.com/gallery/narrative-state/scrollytelling/)** — Free Core. Scroll the story; the sticky chart zooms and annotates per step, with dot navigation. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/narrative-state/scrollytelling.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/narrative-state/scrollytelling/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Anarrative-state%2Fscrollytelling) ### Narrative - **[Narrative lab](https://westcoast-charts.com/gallery/history/story/)** — Free Core. Frames over time with captions, play and scrub. [Original sample](https://westcoast-charts.com/examples/samples/wcc/features/story.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/history/story/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Fnarrative) - **[Marathon storyboard](https://westcoast-charts.com/gallery/unit/marathon-storyboard/)** — Free Core. Play a race story (start, halfway, finish); the marks regroup per frame, with transport, scrubber and captions. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/unit/marathon-storyboard.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/unit/marathon-storyboard/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Aunit%2Fmarathon-storyboard) - **[Bar chart race](https://westcoast-charts.com/gallery/bar/horizontal-bar-race/)** — Free Core. Cities re-rank month by month with a ticker. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/bar/horizontal-bar-race.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/bar/horizontal-bar-race/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Abar%2Fhorizontal-bar-race) ### Trellis - **[Trellis lab](https://westcoast-charts.com/gallery/trellis/overview/)** — Free Core. The trellis plugin: by, row × column grids, shared scales, promotion. [Original sample](https://westcoast-charts.com/examples/samples/wcc/features/trellis.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/overview/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftrellis) - **[Revenue by region](https://westcoast-charts.com/gallery/trellis/revenue-by-region/)** — Free Core. One area panel per region on a shared y scale, synced crosshair, latest value in each header. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/revenue-by-region.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/revenue-by-region/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Atrellis%2Frevenue-by-region) - **[Department by quarter](https://westcoast-charts.com/gallery/trellis/department-by-quarter/)** — Free Core. Tidy rows (department, quarter, spend) become one column panel per department. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/department-by-quarter.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/department-by-quarter/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Atrellis%2Fdepartment-by-quarter) - **[Stock performance grid](https://westcoast-charts.com/gallery/trellis/stock-performance-grid/)** — Free Core. Nine tickers on independent scales; a panel() hook colours each green or red by its change. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/stock-performance-grid.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/stock-performance-grid/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Atrellis%2Fstock-performance-grid) - **[Distribution by cohort](https://westcoast-charts.com/gallery/trellis/distribution-by-cohort/)** — Free Core. Session-length histograms per signup cohort; the plugin gives every panel the same bins. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/distribution-by-cohort.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/distribution-by-cohort/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Atrellis%2Fdistribution-by-cohort) - **[KPI gauge grid](https://westcoast-charts.com/gallery/trellis/kpi-gauge-grid/)** — Free Core. Eight gauges from one definition, sharing the same bands. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/kpi-gauge-grid.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/kpi-gauge-grid/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Atrellis%2Fkpi-gauge-grid) - **[Clinical reference bands](https://westcoast-charts.com/gallery/trellis/clinical-reference-bands/)** — Free Core. Lab values over 14 days; each panel shades its own normal range with scoped annotations. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/clinical-reference-bands.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/clinical-reference-bands/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Atrellis%2Fclinical-reference-bands) - **[Panel promotion](https://westcoast-charts.com/gallery/trellis/panel-promotion/)** — Free Core. Click a panel header to expand it; Esc or the header again restores the grid. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/panel-promotion.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/panel-promotion/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Atrellis%2Fpanel-promotion) - **[Metrics by unit](https://westcoast-charts.com/gallery/trellis/metrics-by-unit/)** — Free Core. Six sensors with their own units: independent y scales and per-panel formatters. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/metrics-by-unit.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/metrics-by-unit/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Atrellis%2Fmetrics-by-unit) - **[Top and bottom markets](https://westcoast-charts.com/gallery/trellis/top-and-bottom-markets/)** — Free Core. The three best and three worst markets by growth, via an explicit panel order. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/top-and-bottom-markets.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/top-and-bottom-markets/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Atrellis%2Ftop-and-bottom-markets) - **[Traffic by country](https://westcoast-charts.com/gallery/trellis/traffic-by-country/)** — Free Core. 100 % stacked device split per country, one shared legend for all panels. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/traffic-by-country.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/traffic-by-country/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Atrellis%2Ftraffic-by-country) - **[Activity by location](https://westcoast-charts.com/gallery/trellis/activity-by-location/)** — Free Core. Weekday × hour heatmaps per office on one shared colour scale. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/activity-by-location.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/activity-by-location/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Atrellis%2Factivity-by-location) - **[IoT device health](https://westcoast-charts.com/gallery/trellis/iot-device-health/)** — Free Core. Battery per device; panel() turns a panel red and the header flags it when it ends below 70 %. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/iot-device-health.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/iot-device-health/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Atrellis%2Fiot-device-health) - **[Task mix by team](https://westcoast-charts.com/gallery/trellis/task-mix-by-team/)** — Free Core. Task type split (Feature, Bug, Chore, Research) per team as donut panels with the same colour order. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/trellis/task-mix-by-team.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/trellis/task-mix-by-team/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Atrellis%2Ftask-mix-by-team) ### Canvas renderer - **[Canvas renderer lab](https://westcoast-charts.com/gallery/canvas/renderer-canvas/)** — Free Core. SVG and canvas side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/features/renderer-canvas.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/canvas/renderer-canvas/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Frenderer-canvas) - **[Large scatter](https://westcoast-charts.com/gallery/scatter/scatter-canvas-renderer/)** — Free Core. 60 000 points on canvas with xy zoom. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/scatter/scatter-canvas-renderer.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/scatter/scatter-canvas-renderer/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Ascatter%2Fscatter-canvas-renderer) - **[Dense heatmap](https://westcoast-charts.com/gallery/heatmap/heatmap-canvas-renderer/)** — Free Core. A 60 × 100 matrix. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/heatmap/heatmap-canvas-renderer.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/heatmap/heatmap-canvas-renderer/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=f%3Aheatmap%2Fheatmap-canvas-renderer) ## Theming ### Themes - **[Theme preview](https://westcoast-charts.com/gallery/theming/theme-preview/)** — Free Core. The same dashboard in the selected preset and mode. [Original sample](https://westcoast-charts.com/examples/samples/wcc/theming.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/theming/theme-preview/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftheming) ## Labs ### Type labs - **[Bar race](https://westcoast-charts.com/gallery/labs/bar-race/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/bar-race.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/bar-race/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-bar-race) - **[Beeswarm](https://westcoast-charts.com/gallery/labs/beeswarm/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/beeswarm.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/beeswarm/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-beeswarm) - **[Calendar](https://westcoast-charts.com/gallery/labs/calendar/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/calendar.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/calendar/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-calendar) - **[Dumbbell](https://westcoast-charts.com/gallery/labs/dumbbell/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/dumbbell.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/dumbbell/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-dumbbell) - **[Funnel](https://westcoast-charts.com/gallery/labs/funnel/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/funnel.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/funnel/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-funnel) - **[Gauge](https://westcoast-charts.com/gallery/labs/gauge/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/gauge.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/gauge/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-gauge) - **[Histogram](https://westcoast-charts.com/gallery/labs/histogram/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/histogram.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/histogram/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-histogram) - **[Honeycomb](https://westcoast-charts.com/gallery/labs/honeycomb/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/honeycomb.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/honeycomb/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-honeycomb) - **[Icicle](https://westcoast-charts.com/gallery/labs/icicle/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/icicle.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/icicle/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-icicle) - **[Morph](https://westcoast-charts.com/gallery/labs/morph/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/morph.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/morph/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-morph) - **[Pyramid](https://westcoast-charts.com/gallery/labs/pyramid/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/pyramid.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/pyramid/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-pyramid) - **[Raincloud](https://westcoast-charts.com/gallery/labs/raincloud/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/raincloud.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/raincloud/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-raincloud) - **[Slope](https://westcoast-charts.com/gallery/labs/slope/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/slope.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/slope/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-slope) - **[Streamgraph](https://westcoast-charts.com/gallery/labs/streamgraph/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/streamgraph.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/streamgraph/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-streamgraph) - **[Sunburst](https://westcoast-charts.com/gallery/labs/sunburst/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/sunburst.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/sunburst/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-sunburst) - **[Treemap nested](https://westcoast-charts.com/gallery/labs/treemap-nested/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/treemap-nested.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/treemap-nested/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-treemap-nested) - **[Unit](https://westcoast-charts.com/gallery/labs/unit/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/unit.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/unit/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-unit) - **[Violin](https://westcoast-charts.com/gallery/labs/violin/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/violin.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/violin/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-violin) - **[Waffle](https://westcoast-charts.com/gallery/labs/waffle/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/waffle.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/waffle/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-waffle) - **[Waterfall](https://westcoast-charts.com/gallery/labs/waterfall/)** — Free Core. All options of this type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/types/waterfall.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/labs/waterfall/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=lab%2Ftype-waterfall) ## Flagships ### Quint-Semantics: an ops day on one time axis - **[Quint timeline: SaaS ops control room, 24 h](https://westcoast-charts.com/gallery/quint-timeline/saas-ops/)** — Premium. Five lanes, one time axis: requests per 10 min coloured by error rate with deploys and pipeline runs, cost per cluster, error budget left (availability · p95 latency), p95 latency per service and traffic by region. Click to crossfilter, Esc clears. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/quint.html?only=timeline&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/quint-timeline/saas-ops/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=quint%2Ftimeline) - **[Quint convergence: the 18:40 EU incident](https://westcoast-charts.com/gallery/quint-convergence/eu-incident/)** — Premium. The same lanes with a labelled focus lens around the incident on eu-k8s-2 after the checkout v2.41 deploy. Each lane calls out its value at the incident; L or the lens button switches to a linear axis. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/quint.html?only=convergence&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/quint-convergence/eu-incident/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=quint%2Fconvergence) - **[Three-lane convergence](https://westcoast-charts.com/gallery/quint-convergence/three-lane/)** — Premium. Requests, p95 latency and regional traffic with a ×6 lens and 30 min of context on each side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/quint.html?only=convergence-three&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/quint-convergence/three-lane/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=quint%2Fconvergence-three) - **[Quint semantics on a clock: SaaS ops, 24 h](https://westcoast-charts.com/gallery/radial-column/quint-radial/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=quint-radial&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/quint-radial/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fquint-radial) ### Medicine & practice - **[Ward vitals clock: 24 h from 15:00 (V2)](https://westcoast-charts.com/gallery/medical/vitals-ward/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/medical.html?only=vitals-ward&embed=1&lang=en#v-vitals-ward) · [Configuration Markdown](https://westcoast-charts.com/gallery/medical/vitals-ward/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=medical%2Fvitals-ward) - **[Practice vitals clock: 12 h, few measurements](https://westcoast-charts.com/gallery/medical/vitals-practice/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/medical.html?only=vitals-practice&embed=1&lang=en#v-vitals-practice) · [Configuration Markdown](https://westcoast-charts.com/gallery/medical/vitals-practice/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=medical%2Fvitals-practice) - **[Threshold-band rings on a radialColumn (V1)](https://westcoast-charts.com/gallery/medical/vitals-bands/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/medical.html?only=vitals-bands&embed=1&lang=en#v-vitals-bands) · [Configuration Markdown](https://westcoast-charts.com/gallery/medical/vitals-bands/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=medical%2Fvitals-bands) - **[Live feed (demo): append measurements (V3)](https://westcoast-charts.com/gallery/medical/vitals-live/)** — Premium. api(chart).append(id, points) adds measurements and redraws at most once a second. The button sends invented values; the calling software always decides what they mean. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/medical.html?only=vitals-live&embed=1&lang=en#v-vitals-live) · [Configuration Markdown](https://westcoast-charts.com/gallery/medical/vitals-live/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=medical%2Fvitals-live) - **[Practice day: rooms as lanes, doctor routes, conflicts](https://westcoast-charts.com/gallery/medical/schedule-day/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/medical.html?only=schedule-day&embed=1&lang=en#v-schedule-day) · [Configuration Markdown](https://westcoast-charts.com/gallery/medical/schedule-day/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=medical%2Fschedule-day) - **[Practice day: staff as lanes](https://westcoast-charts.com/gallery/medical/schedule-staff/)** — Premium. The same model with lanes: "people": one lane per person; an appointment with two people (doctor + assistant) shows in both lanes. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/medical.html?only=schedule-staff&embed=1&lang=en#v-schedule-staff) · [Configuration Markdown](https://westcoast-charts.com/gallery/medical/schedule-staff/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=medical%2Fschedule-staff) - **[Board: day vertical, columns = rooms](https://westcoast-charts.com/gallery/medical/board-day/)** — Premium. view: "board" (automatic below 560 px): time downwards, one column per room. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/medical.html?only=board-day&embed=1&lang=en#v-board-day) · [Configuration Markdown](https://westcoast-charts.com/gallery/medical/board-day/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=medical%2Fboard-day) - **[Board: week Mon–Fri × rooms](https://westcoast-charts.com/gallery/medical/board-week/)** — Premium. 304 appointments of the week, columns = days × rooms; Monday's conflicts stay marked. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/medical.html?only=board-week&embed=1&lang=en#v-board-week) · [Configuration Markdown](https://westcoast-charts.com/gallery/medical/board-week/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=medical%2Fboard-week) - **[Patient flow: stages per patient (rangeBar)](https://westcoast-charts.com/gallery/medical/flow-timeline/)** — Premium. schedule.flow.fromEvents(): check-in, waiting room, lab, exam and checkout per pseudonymous patient ID; waiting times are summarized as median / P90, never a sum or mean. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/medical.html?only=flow-timeline&embed=1&lang=en#v-flow-timeline) · [Configuration Markdown](https://westcoast-charts.com/gallery/medical/flow-timeline/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=medical%2Fflow-timeline) - **[Patient flow: transitions with median / P90 (sankey)](https://westcoast-charts.com/gallery/medical/flow-sankey/)** — Premium. The same visits as a sankey: width = patients; the tooltip shows the median and P90 duration per transition (sankeyPlugin from flow.fromEvents()). [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/medical.html?only=flow-sankey&embed=1&lang=en#v-flow-sankey) · [Configuration Markdown](https://westcoast-charts.com/gallery/medical/flow-sankey/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=medical%2Fflow-sankey) - **[Utilization per room and half hour (heatmap)](https://westcoast-charts.com/gallery/medical/util-heatmap/)** — Premium. schedule.utilization() with 30-minute buckets: busy / open minutes. Closed buckets (before 07:30, lunch break 12:30–13:30) are hatched with their own legend entry instead of 0% (plotOptions.heatmap.empty); partly open buckets count only their open minutes. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/medical.html?only=util-heatmap&embed=1&lang=en#v-util-heatmap) · [Configuration Markdown](https://westcoast-charts.com/gallery/medical/util-heatmap/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=medical%2Futil-heatmap) - **[Utilization per day, 4 weeks (calendar)](https://westcoast-charts.com/gallery/medical/util-calendar/)** — Premium. Daily values from schedule.utilization() with day buckets; weekends closed: hatched, own legend entry, tooltip “closed”. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/medical.html?only=util-calendar&embed=1&lang=en#v-util-calendar) · [Configuration Markdown](https://westcoast-charts.com/gallery/medical/util-calendar/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=medical%2Futil-calendar) ### Ops control rooms - **[Quad semantics: SaaS ops control room, 24 h](https://westcoast-charts.com/gallery/radial-column/saas-ops-quad/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=saas-ops-quad&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/saas-ops-quad/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fsaas-ops-quad) - **[Nested radial cascade: four levels of one incident](https://westcoast-charts.com/gallery/concepts/nested-radial-cascade/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/concepts/nested-radial-cascade.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/concepts/nested-radial-cascade/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fconcepts%2Fnested-radial-cascade) - **[Matrix lattice: status grid linked to relation flows](https://westcoast-charts.com/gallery/concepts/matrix-lattice/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/concepts/matrix-lattice.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/concepts/matrix-lattice/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fconcepts%2Fmatrix-lattice) - **[Net lattice: cluster topology with anomaly badges](https://westcoast-charts.com/gallery/concepts/net-lattice/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/concepts/net-lattice.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/concepts/net-lattice/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fconcepts%2Fnet-lattice) - **[Matrix core: service calls inside error budgets and latency](https://westcoast-charts.com/gallery/radial-column/matrix-mesh/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=matrix-mesh&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/matrix-mesh/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fmatrix-mesh) - **[Matrix core: health checks, owners and 14 days of alerts](https://westcoast-charts.com/gallery/radial-column/matrix-checks/)** — 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). [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=matrix-checks&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/matrix-checks/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fmatrix-checks) ### Facet network - **[Incident Blast Radius](https://westcoast-charts.com/gallery/network/facet-incident/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/network/facet-incident.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/network/facet-incident/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fnetwork%2Ffacet-incident) - **[Facet Layout at Scale](https://westcoast-charts.com/gallery/network/facet-estate/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/network/facet-estate.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/network/facet-estate/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fnetwork%2Ffacet-estate) - **[Network graph](https://westcoast-charts.com/gallery/originals/network/)** — Premium. Force-directed graph with clusters, weighted edges and focus on hover. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/network.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/originals/network/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=originals%2Fnetwork) ## Multi-semantic radial ### Orientation - **[Orientation: the SaaS clock turned to the evening incident](https://westcoast-charts.com/gallery/radial-column/orient-quint/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=orient-quint&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/orient-quint/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Forient-quint) - **[Orientation: goal rings turned to the second half of the month](https://westcoast-charts.com/gallery/radial-column/orient-goals/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=orient-goals&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/orient-goals/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Forient-goals) ### Wave ring - **[Wave ring: a week of cluster load cycles](https://westcoast-charts.com/gallery/radial-column/wave-clusters/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=wave-clusters&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/wave-clusters/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fwave-clusters) - **[Wave ring: the seasonal cycle of a typical day](https://westcoast-charts.com/gallery/radial-column/wave-energy/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=wave-energy&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/wave-energy/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fwave-energy) ### Chord inside - **[Chord inside: freight lanes between six regions](https://westcoast-charts.com/gallery/radial-column/chord-trade/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=chord-trade&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/chord-trade/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fchord-trade) - **[Ticket handoffs between teams, agents around](https://westcoast-charts.com/gallery/radial-column/chord-handoffs/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=chord-handoffs&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/chord-handoffs/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fchord-handoffs) - **[Service mesh: calls, ownership and cost in one ring](https://westcoast-charts.com/gallery/radial-column/chord-mesh/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=chord-mesh&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/chord-mesh/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fchord-mesh) ### Triple semantics - **[Triple semantics: 24 h API traffic](https://westcoast-charts.com/gallery/radial-column/triple-api/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=triple-api&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/triple-api/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Ftriple-api) - **[Triple semantics: a retail year](https://westcoast-charts.com/gallery/radial-column/triple-retail/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=triple-retail&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/triple-retail/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Ftriple-retail) - **[Triple semantics: load, price and change](https://westcoast-charts.com/gallery/radial-column/triple-energy/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=triple-energy&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/triple-energy/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Ftriple-energy) ### Linked layers - **[Day parts aligned to a 24 h ring](https://westcoast-charts.com/gallery/radial-column/multi-dayparts/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=multi-dayparts&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/multi-dayparts/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fmulti-dayparts) - **[A year: Quarter › Month inside 365 days](https://westcoast-charts.com/gallery/radial-column/multi-year/)** — 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). [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=multi-year&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/multi-year/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fmulti-year) - **[Independent: channel mix + hourly load](https://westcoast-charts.com/gallery/radial-column/multi-channel/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=multi-channel&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/multi-channel/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fmulti-channel) - **[Region › Country with products (explicit map)](https://westcoast-charts.com/gallery/radial-column/multi-drill/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=multi-drill&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/multi-drill/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fmulti-drill) - **[Ops clock: incidents by hour and kind](https://westcoast-charts.com/gallery/radial-column/multi-clock/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=multi-clock&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/multi-clock/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fmulti-clock) - **[Link modes: none / category / angle / map](https://westcoast-charts.com/gallery/radial-column/multi-modes/)** — 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). [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=multi-modes&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/multi-modes/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fmulti-modes) ### Time rings & goals - **[Time ring: a week of chats, hour by hour](https://westcoast-charts.com/gallery/radial-column/heat-week/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=heat-week&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/heat-week/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fheat-week) - **[Team goals: seven rings inside a month of output](https://westcoast-charts.com/gallery/radial-column/goals-team/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=goals-team&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/goals-team/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fgoals-team) - **[Server load live: gauge now, ring = last 60 minutes](https://westcoast-charts.com/gallery/radial-column/gauge-live/)** — 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). [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?only=gauge-live&embed=1&lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/radial-column/gauge-live/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=radial-multi%2Fgauge-live) ### Radial column basics - **[Radial column: ring & inner layers](https://westcoast-charts.com/examples/view/?example=originals%2Fradial-column-layers)** — Premium. The column ring with spectrum fill and composable inner layers: nested donut, sunburst, three layers at once. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?part=layers&lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=originals%2Fradial-column-layers) - **[Radial column: series, gauge & live](https://westcoast-charts.com/examples/view/?example=originals%2Fradial-column-series)** — Premium. Stacked, grouped and negative series, a gauge arc with targets and a 360-bar live ring. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/radial-column.html?part=series&lang=en) · [Edit data](https://westcoast-charts.com/chart-playground/?example=originals%2Fradial-column-series) ## Chart types ### Sankey - **[Basic Sankey](https://westcoast-charts.com/gallery/sankey/basic-sankey/)** — Premium. Where a household budget goes: income sources into spending categories. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/basic-sankey.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/basic-sankey/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fbasic-sankey) - **[Vertical Sankey](https://westcoast-charts.com/gallery/sankey/vertical-sankey/)** — Premium. The same kind of flow drawn top to bottom: a yearly budget split into teams. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/vertical-sankey.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/vertical-sankey/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fvertical-sankey) - **[Circular Sankey](https://westcoast-charts.com/gallery/sankey/circular-sankey/)** — Premium. A material loop: recycled material flows back into production. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/circular-sankey.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/circular-sankey/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fcircular-sankey) - **[Alluvial](https://westcoast-charts.com/gallery/sankey/alluvial/)** — Premium. Plan changes across three yearly snapshots; stage labels above the columns. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/alluvial.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/alluvial/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Falluvial) - **[Chord](https://westcoast-charts.com/gallery/sankey/chord/)** — Premium. Customers switching between plans in a quarter, as a directed chord diagram (the chord type of the premium plugin). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/chord.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/chord/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fchord) - **[Alternate Node](https://westcoast-charts.com/gallery/sankey/alternate-node/)** — Premium. Node alignment: justify, left, right and centre - switch with the buttons. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/alternate-node.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/alternate-node/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Falternate-node) - **[Node Overlapping](https://westcoast-charts.com/gallery/sankey/node-overlapping/)** — Premium. Thirty small sources into five buckets: nodes and labels stay apart. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/node-overlapping.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/node-overlapping/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fnode-overlapping) - **[Data Update](https://westcoast-charts.com/gallery/sankey/data-update/)** — Premium. New values every 2.5 s; nodes and links glide to their new size. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/data-update.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/data-update/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fdata-update) - **[Data Morph](https://westcoast-charts.com/gallery/sankey/data-morph/)** — Premium. Switch between two different structures; shared nodes morph, new ones fade in. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/data-morph.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/data-morph/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fdata-morph) - **[Particle Flow](https://westcoast-charts.com/gallery/sankey/particle-flow/)** — Premium. Particles travel along each link; their density follows the flow. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/particle-flow.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/particle-flow/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fparticle-flow) - **[Playback](https://westcoast-charts.com/gallery/sankey/playback/)** — Premium. Quarterly frames with play / pause and a scrubber built in. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/playback.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/playback/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fplayback) - **[Path Highlight](https://westcoast-charts.com/gallery/sankey/path-highlight/)** — Premium. Hover a node or link to trace its path; the buttons highlight from code via the premium api. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/path-highlight.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/path-highlight/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fpath-highlight) - **[Draggable Nodes](https://westcoast-charts.com/gallery/sankey/draggable-nodes/)** — Premium. Drag a node up or down; links follow and the position survives updates. nodeMove reports the offset. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/draggable-nodes.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/draggable-nodes/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fdraggable-nodes) - **[Drill Down](https://westcoast-charts.com/gallery/sankey/drill-down/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/drill-down.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/drill-down/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fdrill-down) - **[Comparison](https://westcoast-charts.com/gallery/sankey/comparison/)** — Premium. Two years side by side with the same node colours. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/comparison.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/comparison/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fcomparison) - **[Node Customization](https://westcoast-charts.com/gallery/sankey/node-customization/)** — Premium. Per-node colours, wider nodes, rounded corners and label formatting. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/node-customization.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/node-customization/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fnode-customization) - **[Edge Options](https://westcoast-charts.com/gallery/sankey/edge-options/)** — Premium. Link colour modes (gradient, source, target, fixed), opacity and curvature. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/edge-options.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/edge-options/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fedge-options) - **[Themes](https://westcoast-charts.com/gallery/sankey/themes/)** — Premium. The same diagram in the theme presets, light and dark. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/themes.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/themes/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fthemes) - **[CSS Theming](https://westcoast-charts.com/gallery/sankey/css-theming/)** — Premium. Nodes, links and labels carry stable classes (wcc-node, wcc-link, wcc-label) for CSS overrides. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/css-theming.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/css-theming/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fcss-theming) - **[Custom Fonts](https://westcoast-charts.com/gallery/sankey/custom-fonts/)** — Premium. chart.fontFamily and label font size / weight. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/custom-fonts.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/custom-fonts/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fcustom-fonts) - **[Plugins](https://westcoast-charts.com/gallery/sankey/plugins/)** — 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). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/plugins.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/plugins/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fplugins) - **[Localization RTL](https://westcoast-charts.com/gallery/sankey/localization-rtl/)** — Premium. Mirrored layout on a dir="rtl" page: the flow runs right to left, labels sit on the mirrored side, Arabic numbers. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/localization-rtl.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/localization-rtl/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Flocalization-rtl) - **[Node alignment](https://westcoast-charts.com/gallery/sankey/node-alignment/)** — Premium. One energy flow with nodeAlign 'left', 'center' and 'right': where nodes without further outflow settle; labels drawn outside the columns. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/sankey/node-alignment.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/sankey/node-alignment/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fsankey%2Fnode-alignment) ### Gantt - **[Basic Gantt](https://westcoast-charts.com/gallery/gantt/basic-gantt/)** — Premium. A product launch plan: groups, progress, dependencies, a today line and a task grid. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/basic-gantt.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/basic-gantt/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fbasic-gantt) - **[Data Parsing](https://westcoast-charts.com/gallery/gantt/data-parsing/)** — Premium. Tasks given as start / end ISO strings and comma-separated dependencies are parsed as is. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/data-parsing.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/data-parsing/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fdata-parsing) - **[Milestones](https://westcoast-charts.com/gallery/gantt/milestones/)** — Premium. Zero-length tasks (or milestone: true) draw as diamonds and can be dependency targets. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/milestones.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/milestones/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fmilestones) - **[Baseline](https://westcoast-charts.com/gallery/gantt/baseline/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/baseline.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/baseline/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fbaseline) - **[Critical Path](https://westcoast-charts.com/gallery/gantt/critical-path/)** — Premium. The longest dependency chain to the launch is computed and highlighted. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/critical-path.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/critical-path/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fcritical-path) - **[Rollups](https://westcoast-charts.com/gallery/gantt/rollups/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/rollups.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/rollups/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Frollups) - **[Split Tasks](https://westcoast-charts.com/gallery/gantt/split-tasks/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/split-tasks.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/split-tasks/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fsplit-tasks) - **[Working Calendar](https://westcoast-charts.com/gallery/gantt/working-calendar/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/working-calendar.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/working-calendar/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fworking-calendar) - **[Project Boundary](https://westcoast-charts.com/gallery/gantt/project-boundary/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/project-boundary.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/project-boundary/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fproject-boundary) - **[Dependency Types](https://westcoast-charts.com/gallery/gantt/dependency-types/)** — 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). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/dependency-types.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/dependency-types/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fdependency-types) - **[Dependency Arrows](https://westcoast-charts.com/gallery/gantt/dependency-arrows/)** — Premium. Arrow routing with many crossings, arrow size and colour. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/dependency-arrows.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/dependency-arrows/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fdependency-arrows) - **[Dependency Edit](https://westcoast-charts.com/gallery/gantt/dependency-edit/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/dependency-edit.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/dependency-edit/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fdependency-edit) - **[Task List Columns](https://westcoast-charts.com/gallery/gantt/task-list-columns/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/task-list-columns.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/task-list-columns/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Ftask-list-columns) - **[Custom Columns](https://westcoast-charts.com/gallery/gantt/custom-columns/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/custom-columns.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/custom-columns/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fcustom-columns) - **[Extended Columns](https://westcoast-charts.com/gallery/gantt/extended-columns/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/extended-columns.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/extended-columns/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fextended-columns) - **[WBS Column](https://westcoast-charts.com/gallery/gantt/wbs-column/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/wbs-column.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/wbs-column/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fwbs-column) - **[Progress Ring Column](https://westcoast-charts.com/gallery/gantt/progress-ring-column/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/progress-ring-column.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/progress-ring-column/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fprogress-ring-column) - **[Selection](https://westcoast-charts.com/gallery/gantt/selection/)** — Premium. Click to select, Ctrl / Shift-click for more; the selection is reported and settable via the api. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/selection.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/selection/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fselection) - **[Task CRUD](https://westcoast-charts.com/gallery/gantt/task-crud/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/task-crud.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/task-crud/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Ftask-crud) - **[Draw Task](https://westcoast-charts.com/gallery/gantt/draw-task/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/draw-task.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/draw-task/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fdraw-task) - **[Scroll To Task](https://westcoast-charts.com/gallery/gantt/scroll-to-task/)** — Premium. Jump to any task: its group opens, the timeline scrolls and the task is selected. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/scroll-to-task.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/scroll-to-task/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fscroll-to-task) - **[Sort Filter](https://westcoast-charts.com/gallery/gantt/sort-filter/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/sort-filter.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/sort-filter/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fsort-filter) - **[Grouping](https://westcoast-charts.com/gallery/gantt/grouping/)** — Premium. Each series is a collapsible group; expand / collapse all from the api. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/grouping.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/grouping/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fgrouping) - **[Events](https://westcoast-charts.com/gallery/gantt/events/)** — Premium. Hover, select, drag (taskChange, can veto), group toggle and zoom events. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/events.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/events/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fevents) - **[Crosshair](https://westcoast-charts.com/gallery/gantt/crosshair/)** — Premium. A vertical crosshair with a date pill follows the pointer over the timeline. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/crosshair.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/crosshair/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fcrosshair) - **[Custom Colors](https://westcoast-charts.com/gallery/gantt/custom-colors/)** — Premium. Colours per group (series.color) and per task (fillColor). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/custom-colors.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/custom-colors/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fcustom-colors) - **[Bar Labels](https://westcoast-charts.com/gallery/gantt/bar-labels/)** — Premium. Labels beside or inside the bar (auto by room) with a formatter. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/bar-labels.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/bar-labels/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fbar-labels) - **[CSS Theming](https://westcoast-charts.com/gallery/gantt/css-theming/)** — Premium. Stable classes (wcc-gantt-bar, wcc-gantt-progress, wcc-gantt-summary …) restyled with CSS. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/css-theming.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/css-theming/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fcss-theming) - **[Annotations](https://westcoast-charts.com/gallery/gantt/annotations/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/annotations.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/annotations/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fannotations) - **[Accessibility](https://westcoast-charts.com/gallery/gantt/accessibility/)** — Premium. Tab into the chart and use the arrow keys; screen readers get a summary and a data table. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/accessibility.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/accessibility/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Faccessibility) - **[Toolbar](https://westcoast-charts.com/gallery/gantt/toolbar/)** — Premium. Built-in controls (today, zoom in / out, fit) plus app buttons driving the api (view, fit, zoom). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/toolbar.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/toolbar/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Ftoolbar) - **[State Persistence](https://westcoast-charts.com/gallery/gantt/state-persistence/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/state-persistence.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/state-persistence/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fstate-persistence) - **[Localization RTL](https://westcoast-charts.com/gallery/gantt/localization-rtl/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/localization-rtl.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/localization-rtl/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Flocalization-rtl) - **[Hourly drag snap](https://westcoast-charts.com/gallery/gantt/hourly-snap/)** — Premium. A one-day maintenance window with drag enabled and snap: 'hour': bars move and resize in whole hours. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/hourly-snap.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/hourly-snap/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Fhourly-snap) - **[Labels inside the bars](https://westcoast-charts.com/gallery/gantt/labels-inside/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/gantt/labels-inside.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/gantt/labels-inside/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fgantt%2Flabels-inside) ### Tree - **[Top To Bottom](https://westcoast-charts.com/gallery/tree/top-to-bottom/)** — Premium. An organisation chart with the root at the top. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/top-to-bottom.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/top-to-bottom/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Ftop-to-bottom) - **[Bottom To Top](https://westcoast-charts.com/gallery/tree/bottom-to-top/)** — Premium. The same chart growing upwards from the root. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/bottom-to-top.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/bottom-to-top/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fbottom-to-top) - **[Left To Right](https://westcoast-charts.com/gallery/tree/left-to-right/)** — Premium. Horizontal layout with the root on the left. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/left-to-right.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/left-to-right/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fleft-to-right) - **[Right To Left](https://westcoast-charts.com/gallery/tree/right-to-left/)** — Premium. Horizontal layout with the root on the right. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/right-to-left.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/right-to-left/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fright-to-left) - **[Dynamic View Change](https://westcoast-charts.com/gallery/tree/dynamic-view-change/)** — Premium. Switch the orientation at runtime; nodes move to their new places. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/dynamic-view-change.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/dynamic-view-change/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fdynamic-view-change) - **[Radial Layout](https://westcoast-charts.com/gallery/tree/radial-layout/)** — Premium. A module graph laid out on circles around the root. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/radial-layout.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/radial-layout/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fradial-layout) - **[Radial Dendrogram](https://westcoast-charts.com/gallery/tree/radial-dendrogram/)** — Premium. Leaves on the outer ring (cluster layout) in radial form. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/radial-dendrogram.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/radial-dendrogram/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fradial-dendrogram) - **[Default Cards](https://westcoast-charts.com/gallery/tree/default-cards/)** — Premium. Cards with initials avatar, title and subtitle. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/default-cards.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/default-cards/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fdefault-cards) - **[Minimal](https://westcoast-charts.com/gallery/tree/minimal/)** — Premium. Dots and labels only. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/minimal.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/minimal/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fminimal) - **[Rich Node Card](https://westcoast-charts.com/gallery/tree/rich-node-card/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/rich-node-card.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/rich-node-card/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Frich-node-card) - **[Org Chart With Metrics](https://westcoast-charts.com/gallery/tree/org-chart-with-metrics/)** — 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). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/org-chart-with-metrics.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/org-chart-with-metrics/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Forg-chart-with-metrics) - **[Per Node Options](https://westcoast-charts.com/gallery/tree/per-node-options/)** — Premium. Colour, badge, subtitle and initial collapse set per node in the data. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/per-node-options.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/per-node-options/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fper-node-options) - **[Per Node Size](https://westcoast-charts.com/gallery/tree/per-node-size/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/per-node-size.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/per-node-size/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fper-node-size) - **[Auto Node Height](https://westcoast-charts.com/gallery/tree/auto-node-height/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/auto-node-height.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/auto-node-height/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fauto-node-height) - **[Expandable Cards](https://westcoast-charts.com/gallery/tree/expandable-cards/)** — Premium. Click a card toggle to expand or collapse its team; the view keeps the clicked card in place. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/expandable-cards.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/expandable-cards/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fexpandable-cards) - **[Count Badges](https://westcoast-charts.com/gallery/tree/count-badges/)** — Premium. Each parent shows its number of direct reports on the toggle. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/count-badges.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/count-badges/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fcount-badges) - **[Node Wrappers](https://westcoast-charts.com/gallery/tree/node-wrappers/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/node-wrappers.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/node-wrappers/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fnode-wrappers) - **[Custom Font Options](https://westcoast-charts.com/gallery/tree/custom-font-options/)** — Premium. chart.fontFamily applies to titles, subtitles and badges. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/custom-font-options.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/custom-font-options/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fcustom-font-options) - **[Edge Color Mode](https://westcoast-charts.com/gallery/tree/edge-color-mode/)** — Premium. Links coloured by branch, by depth, or a single colour; straight, elbow or curved. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/edge-color-mode.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/edge-color-mode/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fedge-color-mode) - **[Active Path](https://westcoast-charts.com/gallery/tree/active-path/)** — Premium. Hover a node: its reporting line to the root and everything below light up. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/active-path.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/active-path/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Factive-path) - **[External Labels](https://westcoast-charts.com/gallery/tree/external-labels/)** — Premium. Dot nodes with the labels outside the marks (top to bottom). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/external-labels.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/external-labels/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fexternal-labels) - **[External Labels LR](https://westcoast-charts.com/gallery/tree/external-labels-lr/)** — Premium. Dot nodes, left to right, labels beside the dots. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/external-labels-lr.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/external-labels-lr/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fexternal-labels-lr) - **[Expand Collapse](https://westcoast-charts.com/gallery/tree/expand-collapse/)** — Premium. A 5 000-node tree opening at level 2; expand any branch. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/expand-collapse.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/expand-collapse/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fexpand-collapse) - **[Batch Expand Collapse](https://westcoast-charts.com/gallery/tree/batch-expand-collapse/)** — Premium. Expand all, collapse to a level or toggle one node from the api. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/batch-expand-collapse.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/batch-expand-collapse/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fbatch-expand-collapse) - **[Group Leaf Nodes](https://westcoast-charts.com/gallery/tree/group-leaf-nodes/)** — Premium. Leaf cards under a parent stack in a column instead of a wide row (stackLeaves). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/group-leaf-nodes.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/group-leaf-nodes/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fgroup-leaf-nodes) - **[Collapse Badges](https://westcoast-charts.com/gallery/tree/collapse-badges/)** — Premium. Collapsed nodes show how many nodes are hidden below (+N). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/collapse-badges.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/collapse-badges/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fcollapse-badges) - **[Selection](https://westcoast-charts.com/gallery/tree/selection/)** — Premium. Click a card to select it; the api selects from code and reports the selection. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/selection.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/selection/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fselection) - **[Focus Mode](https://westcoast-charts.com/gallery/tree/focus-mode/)** — Premium. Focus a person: collapsed ancestors open, the card is selected and panned into view. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/focus-mode.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/focus-mode/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Ffocus-mode) - **[Semantic Zoom](https://westcoast-charts.com/gallery/tree/semantic-zoom/)** — Premium. Zoom out (Ctrl + wheel or the controls) and cards turn into simplified marks; zoom in for full cards. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/semantic-zoom.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/semantic-zoom/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fsemantic-zoom) - **[Lazy Children](https://westcoast-charts.com/gallery/tree/lazy-children/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/lazy-children.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/lazy-children/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Flazy-children) - **[Command Palette](https://westcoast-charts.com/gallery/tree/command-palette/)** — Premium. Type a name or command; Enter focuses the person or runs the command through the api. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/command-palette.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/command-palette/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fcommand-palette) - **[Live Data](https://westcoast-charts.com/gallery/tree/live-data/)** — Premium. Values update every 2 s; badges and totals follow, the view stays put. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/live-data.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/live-data/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Flive-data) - **[Time Travel](https://westcoast-charts.com/gallery/tree/time-travel/)** — Premium. Step through yearly snapshots of the organisation; added and removed teams animate. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/time-travel.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/time-travel/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Ftime-travel) - **[Dark Theme](https://westcoast-charts.com/gallery/tree/dark-theme/)** — Premium. theme.mode: dark with the page surface (open with ?mode=dark for the whole page). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/dark-theme.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/dark-theme/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fdark-theme) - **[CSS Theming](https://westcoast-charts.com/gallery/tree/css-theming/)** — Premium. Restyle cards, titles and links through their classes (wcc-tnode-card, wcc-tnode-title, wcc-tlink). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/css-theming.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/css-theming/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Fcss-theming) - **[Accessibility](https://westcoast-charts.com/gallery/tree/accessibility/)** — Premium. Tab into the chart and walk the hierarchy with the arrow keys. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/accessibility.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/accessibility/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Faccessibility) - **[Localization RTL](https://westcoast-charts.com/gallery/tree/localization-rtl/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/tree/localization-rtl.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/tree/localization-rtl/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Ftree%2Flocalization-rtl) ### Stock - **[Basic](https://westcoast-charts.com/gallery/stock/basic/)** — Premium. Candles with volume, range selector, navigator, crosshair and readout. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/stock/basic.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/stock/basic/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fstock%2Fbasic) - **[Timeframe](https://westcoast-charts.com/gallery/stock/timeframe/)** — Premium. Aggregate daily candles into weeks or months at runtime. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/stock/timeframe.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/stock/timeframe/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fstock%2Ftimeframe) - **[Price Scale](https://westcoast-charts.com/gallery/stock/price-scale/)** — Premium. Linear, logarithmic or percent-change price axis. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/stock/price-scale.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/stock/price-scale/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fstock%2Fprice-scale) - **[Large Dataset](https://westcoast-charts.com/gallery/stock/large-dataset/)** — Premium. 20 years of daily candles (about 5 200); only the visible range is drawn, the navigator summarises all. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/stock/large-dataset.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/stock/large-dataset/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fstock%2Flarge-dataset) - **[Streaming](https://westcoast-charts.com/gallery/stock/streaming/)** — Premium. 5-minute candles; a new tick every second updates the last candle, a new candle every 5 ticks; the view follows. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/stock/streaming.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/stock/streaming/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fstock%2Fstreaming) - **[Analysis](https://westcoast-charts.com/gallery/stock/analysis/)** — Premium. SMA, EMA and Bollinger overlays plus RSI and MACD panes. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/stock/analysis.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/stock/analysis/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fstock%2Fanalysis) - **[Comparison](https://westcoast-charts.com/gallery/stock/comparison/)** — Premium. Two more tickers rebased to the main close at the start of the view. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/stock/comparison.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/stock/comparison/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fstock%2Fcomparison) - **[Cross Chart Sync](https://westcoast-charts.com/gallery/stock/cross-chart-sync/)** — Premium. Zoom or pan either chart; the other follows (zoomed event + api.setRange). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/stock/cross-chart-sync.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/stock/cross-chart-sync/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fstock%2Fcross-chart-sync) - **[Trading Overlays](https://westcoast-charts.com/gallery/stock/trading-overlays/)** — 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". [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/stock/trading-overlays.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/stock/trading-overlays/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fstock%2Ftrading-overlays) - **[Event Markers](https://westcoast-charts.com/gallery/stock/event-markers/)** — Premium. Earnings, dividend and split flags below or above the candles, with tooltips. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/stock/event-markers.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/stock/event-markers/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fstock%2Fevent-markers) - **[Data Legend](https://westcoast-charts.com/gallery/stock/data-legend/)** — Premium. The readout shows open, high, low, close, change and volume (and overlay values) for the hovered candle. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/stock/data-legend.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/stock/data-legend/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fstock%2Fdata-legend) - **[Toolbar](https://westcoast-charts.com/gallery/stock/toolbar/)** — Premium. Built-in range buttons plus a page toolbar driving the api (style, zoom, timeframe). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/stock/toolbar.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/stock/toolbar/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fstock%2Ftoolbar) - **[Theming](https://westcoast-charts.com/gallery/stock/theming/)** — Premium. Up / down colours, theme presets and dark mode. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/stock/theming.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/stock/theming/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fstock%2Ftheming) - **[Export](https://westcoast-charts.com/gallery/stock/export/)** — Premium. Export the chart as PNG / SVG or the visible data as CSV. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/stock/export.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/stock/export/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fstock%2Fexport) - **[All Drawing Tools](https://westcoast-charts.com/gallery/stock/drawing-tools/)** — 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). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/stock/drawing-tools.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/stock/drawing-tools/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fstock%2Fdrawing-tools) ### Maps - **[Choropleth](https://westcoast-charts.com/gallery/maps/choropleth/)** — Premium. Broadband adoption by country (illustrative), with a colour bar legend. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/choropleth.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/choropleth/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fchoropleth) - **[Bubbles](https://westcoast-charts.com/gallery/maps/bubbles/)** — Premium. City sizes as proportional circles, with a size key. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/bubbles.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/bubbles/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fbubbles) - **[Markers](https://westcoast-charts.com/gallery/maps/markers/)** — Premium. Office pins with labels and partner sites as diamonds; markers keep their size while zooming. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/markers.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/markers/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fmarkers) - **[Hexbin](https://westcoast-charts.com/gallery/maps/hexbin/)** — Premium. 6 000 sample sightings binned into screen hexagons; size and colour follow the count. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/hexbin.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/hexbin/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fhexbin) - **[Pixel](https://westcoast-charts.com/gallery/maps/pixel/)** — Premium. The choropleth drawn as a dot (pixel) map. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/pixel.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/pixel/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fpixel) - **[Arcs](https://westcoast-charts.com/gallery/maps/arcs/)** — Premium. Flight volumes from a hub; width follows the value, dashes show direction. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/arcs.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/arcs/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Farcs) - **[Routes](https://westcoast-charts.com/gallery/maps/routes/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/routes.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/routes/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Froutes) - **[Basemap](https://westcoast-charts.com/gallery/maps/basemap/)** — Premium. The map alone: graticule, sphere and borders without data. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/basemap.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/basemap/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fbasemap) - **[Normalize](https://westcoast-charts.com/gallery/maps/normalize/)** — Premium. Absolute counts divided by population (per million people). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/normalize.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/normalize/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fnormalize) - **[Projections](https://westcoast-charts.com/gallery/maps/projections/)** — Premium. Equal Earth, Mercator, equirectangular and an orthographic globe. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/projections.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/projections/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fprojections) - **[Registry](https://westcoast-charts.com/gallery/maps/registry/)** — Premium. registerMap() with our own GeoJSON (a fictional island with four districts), then used by name. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/registry.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/registry/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fregistry) - **[Honeycomb](https://westcoast-charts.com/gallery/maps/honeycomb/)** — 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). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/honeycomb.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/honeycomb/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fhoneycomb) - **[Joins](https://westcoast-charts.com/gallery/maps/joins/)** — Premium. Rows keyed by ISO-2, ISO-3 or English name all join to the same regions. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/joins.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/joins/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fjoins) - **[Extending](https://westcoast-charts.com/gallery/maps/extending/)** — Premium. Inline GeoJSON (our own: a fictional campus) with a bubble layer on top, no registry needed. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/extending.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/extending/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fextending) - **[Scales](https://westcoast-charts.com/gallery/maps/scales/)** — Premium. Linear, log, quantize, diverging and explicit ranges on the same data. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/scales.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/scales/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fscales) - **[Palettes](https://westcoast-charts.com/gallery/maps/palettes/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/palettes.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/palettes/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fpalettes) - **[Patterns](https://westcoast-charts.com/gallery/maps/patterns/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/patterns.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/patterns/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fpatterns) - **[Image Fill](https://westcoast-charts.com/gallery/maps/image-fill/)** — Premium. Visited countries filled with their flags (inline SVG images; only image data URIs, http(s) or relative URLs are accepted). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/image-fill.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/image-fill/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fimage-fill) - **[Theming](https://westcoast-charts.com/gallery/maps/theming/)** — Premium. Theme presets and dark mode on the same map. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/theming.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/theming/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Ftheming) - **[Camera](https://westcoast-charts.com/gallery/maps/camera/)** — Premium. Zoom to a region, zoom by a factor, reset, or rotate the globe from code. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/camera.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/camera/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fcamera) - **[Selection](https://westcoast-charts.com/gallery/maps/selection/)** — Premium. Click a country to select it; the event reports it and the api can select from code. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/selection.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/selection/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fselection) - **[Drilldown](https://westcoast-charts.com/gallery/maps/drilldown/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/drilldown.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/drilldown/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fdrilldown) - **[Annotations](https://westcoast-charts.com/gallery/maps/annotations/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/annotations.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/annotations/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fannotations) - **[A11Y](https://westcoast-charts.com/gallery/maps/a11y/)** — Premium. Tab into the map; arrow keys move between regions with data, Enter selects, +/- zoom. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/a11y.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/a11y/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fa11y) - **[Export](https://westcoast-charts.com/gallery/maps/export/)** — Premium. Export the map as PNG / SVG or the data as CSV. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/export.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/export/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fexport) - **[Albers projections](https://westcoast-charts.com/gallery/maps/albers-projections/)** — Premium. US states with the conic 'albers' projection and the composite 'albersUsa' (Alaska and Hawaii as insets). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/albers-projections.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/albers-projections/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Falbers-projections) - **[Named palettes](https://westcoast-charts.com/gallery/maps/named-palettes/)** — Premium. The sequential colour ramps by name: blue, green, purple, orange, red and gray (teal, heat and viridis appear on other pages). [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/maps/named-palettes.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/maps/named-palettes/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Fmaps%2Fnamed-palettes) ### Originals: variants - **[Chord: sort and ribbon colour](https://westcoast-charts.com/gallery/original-variants/chord-sort-and-colour/)** — Premium. Office-to-office travel: groups sorted 'asc' and 'desc' by size, ribbons coloured by their 'source' or 'target'. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/original-variants/chord-sort-and-colour.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/original-variants/chord-sort-and-colour/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Foriginal-variants%2Fchord-sort-and-colour) - **[Marimekko: column sort](https://westcoast-charts.com/gallery/original-variants/marimekko-sort/)** — Premium. Cloud spend by region and service, columns sorted 'desc' and 'asc' by their total. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/original-variants/marimekko-sort.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/original-variants/marimekko-sort/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Foriginal-variants%2Fmarimekko-sort) - **[Network: node size and renderer](https://westcoast-charts.com/gallery/original-variants/network-size-and-renderer/)** — Premium. A small library dependency graph with nodes.sizeBy 'value', 'degree' and 'none', and the same graph forced to renderer 'svg' and 'canvas'. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/original-variants/network-size-and-renderer.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/original-variants/network-size-and-renderer/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Foriginal-variants%2Fnetwork-size-and-renderer) - **[Radial column: series colours and radial labels](https://westcoast-charts.com/gallery/original-variants/radial-column-series-fill-radial-labels/)** — 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. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/original-variants/radial-column-series-fill-radial-labels.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/original-variants/radial-column-series-fill-radial-labels/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Foriginal-variants%2Fradial-column-series-fill-radial-labels) - **[Radial column: legend right and bottom](https://westcoast-charts.com/gallery/original-variants/radial-column-legend-position/)** — 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'. [Original sample](https://westcoast-charts.com/examples/samples/wcc/gallery/premium/original-variants/radial-column-legend-position.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/original-variants/radial-column-legend-position/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=premium%2Foriginal-variants%2Fradial-column-legend-position) ### WCC originals - **[Marimekko](https://westcoast-charts.com/gallery/originals/marimekko/)** — Premium. Variable-width stacked columns: width is the segment size, height the share. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/marimekko.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/originals/marimekko/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=originals%2Fmarimekko) - **[Chord](https://westcoast-charts.com/gallery/originals/chord/)** — Premium. Flows between groups around a circle. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/chord.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/originals/chord/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=originals%2Fchord) - **[Sankey lab](https://westcoast-charts.com/gallery/originals/sankey-product-lab/)** — Premium. Engineering lab page with every option of the sankey type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/sankey.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/originals/sankey-product-lab/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=labs%2Fsankey) - **[Gantt lab](https://westcoast-charts.com/gallery/originals/gantt-product-lab/)** — Premium. Engineering lab page with every option of the gantt type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/gantt.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/originals/gantt-product-lab/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=labs%2Fgantt) - **[Tree lab](https://westcoast-charts.com/gallery/originals/tree-product-lab/)** — Premium. Engineering lab page with every option of the tree type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/tree.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/originals/tree-product-lab/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=labs%2Ftree) - **[Stock lab](https://westcoast-charts.com/gallery/originals/stock-product-lab/)** — Premium. Engineering lab page with every option of the stock type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/stock.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/originals/stock-product-lab/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=labs%2Fstock) - **[Map lab](https://westcoast-charts.com/gallery/originals/map-product-lab/)** — Premium. Engineering lab page with every option of the map type side by side. [Original sample](https://westcoast-charts.com/examples/samples/wcc/premium/map.html?lang=en) · [Configuration Markdown](https://westcoast-charts.com/gallery/originals/map-product-lab/index.md) · [Edit data](https://westcoast-charts.com/chart-playground/?example=labs%2Fmap)