Stacked polar column
Compare radial totals and their contributing series.
Chart ID: stackedPolarColumn. Independent import: @revolist/charts/stacked-polar-column.
Live example
Section titled “Live example”Loading chart…
Reading the chart
Section titled “Reading the chart”Compare radial category totals split into stacked contributions. These marks are sectors rather than the rectangular marks of the radial-column type.
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.
Use non-negative values for this chart. Negative values are rejected; explicit nulls represent missing observations.
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 createStackedPolarColumnChart after the host mounts. This factory fixes the chart type to stackedPolarColumn.
<div id="chart" style="width: 100%; height: 450px;"></div>Complete runnable TypeScript example with sample data
import { createStackedPolarColumnChart } from '@revolist/charts/stacked-polar-column';
const container = document.getElementById('chart')!;const chart = await createStackedPolarColumnChart({ 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 |
|---|---|---|
markOpacity | 1 | 0.2 to 1; step 0.05 |
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”- Rose — Compare category magnitude through radial sector length.
- Radar line — Compare multiple series across circular category axes.
- Radar area — Compare filled multivariate profiles across circular axes.
- Polar column — Compare grouped values as radial columns.
- 100% stacked polar column — Compare percentage composition in radial columns.
- Radial bar — Show one series as progress around radial tracks.
- Multi-ring radial bar — Compare multiple series as concentric radial tracks.
- Radial column — Compare rectangular columns arranged around a polar axis.