Stacked column
Compare totals and their contributing measures.
Chart ID: stackedColumn. Independent import: @revolist/charts/stacked-column.
Live example
Section titled “Live example”Loading chart…
Reading the chart
Section titled “Reading the chart”Compare category totals and the contribution of each measure. Only the bottom segment has a common baseline, so use grouped columns for precise comparisons between individual measures.
Data requirements
Section titled “Data requirements”Use one category per row and one or more numeric series. Values are finite numbers or explicit nulls; the row mapper does not group or aggregate repeated keys.
The roles below describe the chart's data contract. Generic category/value roles resolve from the dataset; explicitly bind specialized numeric roles as shown in the complete example.
| Data role | Field count |
|---|---|
category | 1 or more |
value | 1 or more |
series | 1 or more |
Download the complete sample data and settings (JSON). See Data & Configuration for mapping, null values, updates and lifecycle rules.
Create this chart
Section titled “Create this chart”Install the package using the installation guide, give the host an explicit height, and call createStackedColumnChart after the host mounts. This factory fixes the chart type to stackedColumn.
<div id="chart" style="width: 100%; height: 450px;"></div>Complete runnable TypeScript example with sample data
import { createStackedColumnChart } from '@revolist/charts/stacked-column';
const container = document.getElementById('chart')!;const chart = await createStackedColumnChart({ container, "dataset": { "revision": 0, "source": "client", "categories": [ { "id": "preview-category-0", "label": "Q1", "path": [ "Q1" ], "labels": [ "Q1" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-1", "label": "Q2", "path": [ "Q2" ], "labels": [ "Q2" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-2", "label": "Q3", "path": [ "Q3" ], "labels": [ "Q3" ], "depth": 1, "kind": "leaf" } ], "series": [ { "id": "preview-series-0", "label": "Revenue", "columnPath": [ "Revenue" ], "labels": [ "Revenue" ], "kind": "leaf", "prop": "preview-0" }, { "id": "preview-series-1", "label": "Margin", "columnPath": [ "Margin" ], "labels": [ "Margin" ], "kind": "leaf", "prop": "preview-1" }, { "id": "preview-series-2", "label": "Units", "columnPath": [ "Units" ], "labels": [ "Units" ], "kind": "leaf", "prop": "preview-2" } ], "values": [ [ 42, 24, 34 ], [ 66, 39, 52 ], [ 54, 46, 63 ] ], "analyticalFrame": { "fields": [ { "id": "pivot:category", "label": "pivot:category", "role": "dimension", "semanticType": "category" }, { "id": "pivot:series", "label": "pivot:series", "role": "dimension", "semanticType": "category" }, { "id": "preview-series-0", "label": "Revenue", "role": "measure", "semanticType": "number", "sourceField": "preview-0" }, { "id": "preview-series-1", "label": "Margin", "role": "measure", "semanticType": "number", "sourceField": "preview-1" }, { "id": "preview-series-2", "label": "Units", "role": "measure", "semanticType": "number", "sourceField": "preview-2" } ], "observations": [ { "id": "[\"preview-category-0\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Q1", "label": "Q1", "path": [ "Q1" ], "labels": [ "Q1" ] }, "pivot:series": { "value": "Revenue", "label": "Revenue", "path": [ "Revenue" ], "labels": [ "Revenue" ] } }, "measures": { "preview-series-0": 42 } }, { "id": "[\"preview-category-0\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Q1", "label": "Q1", "path": [ "Q1" ], "labels": [ "Q1" ] }, "pivot:series": { "value": "Margin", "label": "Margin", "path": [ "Margin" ], "labels": [ "Margin" ] } }, "measures": { "preview-series-1": 24 } }, { "id": "[\"preview-category-0\",\"preview-series-2\"]", "dimensions": { "pivot:category": { "value": "Q1", "label": "Q1", "path": [ "Q1" ], "labels": [ "Q1" ] }, "pivot:series": { "value": "Units", "label": "Units", "path": [ "Units" ], "labels": [ "Units" ] } }, "measures": { "preview-series-2": 34 } }, { "id": "[\"preview-category-1\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Q2", "label": "Q2", "path": [ "Q2" ], "labels": [ "Q2" ] }, "pivot:series": { "value": "Revenue", "label": "Revenue", "path": [ "Revenue" ], "labels": [ "Revenue" ] } }, "measures": { "preview-series-0": 66 } }, { "id": "[\"preview-category-1\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Q2", "label": "Q2", "path": [ "Q2" ], "labels": [ "Q2" ] }, "pivot:series": { "value": "Margin", "label": "Margin", "path": [ "Margin" ], "labels": [ "Margin" ] } }, "measures": { "preview-series-1": 39 } }, { "id": "[\"preview-category-1\",\"preview-series-2\"]", "dimensions": { "pivot:category": { "value": "Q2", "label": "Q2", "path": [ "Q2" ], "labels": [ "Q2" ] }, "pivot:series": { "value": "Units", "label": "Units", "path": [ "Units" ], "labels": [ "Units" ] } }, "measures": { "preview-series-2": 52 } }, { "id": "[\"preview-category-2\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Q3", "label": "Q3", "path": [ "Q3" ], "labels": [ "Q3" ] }, "pivot:series": { "value": "Revenue", "label": "Revenue", "path": [ "Revenue" ], "labels": [ "Revenue" ] } }, "measures": { "preview-series-0": 54 } }, { "id": "[\"preview-category-2\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Q3", "label": "Q3", "path": [ "Q3" ], "labels": [ "Q3" ] }, "pivot:series": { "value": "Margin", "label": "Margin", "path": [ "Margin" ], "labels": [ "Margin" ] } }, "measures": { "preview-series-1": 46 } }, { "id": "[\"preview-category-2\",\"preview-series-2\"]", "dimensions": { "pivot:category": { "value": "Q3", "label": "Q3", "path": [ "Q3" ], "labels": [ "Q3" ] }, "pivot:series": { "value": "Units", "label": "Units", "path": [ "Units" ], "labels": [ "Units" ] } }, "measures": { "preview-series-2": 63 } } ], "matrixCells": [ { "categoryId": "preview-category-0", "seriesId": "preview-series-0", "observationId": "[\"preview-category-0\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-0", "seriesId": "preview-series-1", "observationId": "[\"preview-category-0\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-0", "seriesId": "preview-series-2", "observationId": "[\"preview-category-0\",\"preview-series-2\"]", "measureFieldId": "preview-series-2" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-0", "observationId": "[\"preview-category-1\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-1", "observationId": "[\"preview-category-1\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-2", "observationId": "[\"preview-category-1\",\"preview-series-2\"]", "measureFieldId": "preview-series-2" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-0", "observationId": "[\"preview-category-2\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-1", "observationId": "[\"preview-category-2\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-2", "observationId": "[\"preview-category-2\",\"preview-series-2\"]", "measureFieldId": "preview-series-2" } ] } }, "bindings": {}, "presentation": { "dataLabels": false }});
// When the host unmounts:// chart.destroy();Await updates before reading a snapshot or exporting. Call chart.destroy() when the host unmounts. See the live catalog to interact with this type.
Supported options
Section titled “Supported options”Set these fields in chartOptions. The option schema validates supported keys, ranges and choices; updating chartOptions replaces that authored object.
| Option | Default | Accepted values |
|---|---|---|
showGridLines | true | true or false |
markOpacity | 1 | 0.2 to 1; step 0.05 |
stackOrder | none | none, reverse, ascending, descending, appearance |
stackOffset | diverging | diverging, none, expand |
cornerRadius | 3 | 0 to 30; step 1 |
groupPadding | 0.18 | 0 to 0.45; step 0.01 |
Titles, legends, theme and labels belong to presentation or the corresponding top-level setting. Axis, color, navigation and interaction support depends on the selected chart; see Data & Configuration.
Related charts
Section titled “Related charts”- Grouped column — Compare values side by side across categories.
- 100% stacked column — Compare percentage composition across categories.
- Range column — Compare lower-to-upper intervals as vertical columns.
- Lollipop — Compare single values with compact stems and endpoints.
Charts overview · Installation · Data & Configuration
Stack order
Section titled “Stack order”Use chartOptions.stackOrder or seriesOverrides[id].stackOrder to choose source, reverse, total-based or peak-appearance accumulation while preserving source identities. See policies, per-stack overrides and Pivot controls.
Stack baselines
Section titled “Stack baselines”Set chartOptions.stackOffset or a stack member’s stackOffset to diverging
(default), none or expand. Expansion uses algebraic unit totals and keeps raw
source inspection. See supported partitions, signed values, defaults and limits.
Stable source styling
Section titled “Stable source styling”Use seriesOverrides[id].encoding for saved per-datum styling, gradients and
patterns. Supported line/area paths also accept directed segment rules; bars
accept datum rules without segment/marker fields. Runtime datumStyle callbacks
are reattached after restore. Rules follow canonical category IDs through
sorting, hiding and navigation; source values and raw activation remain intact.
See the complete styling capability matrix, precedence and callback
contract.