5. Series Design — Stacked Cartesian
In this step, the visual settings to be applied to the stack layers of the Stacked widget are configured: layer colors, data labels, column width (for Stacked Column/Bar).
Each layer automatically generated from the Stack By column can receive a separate color in this step.
Wizard route: /cartography/add/seriesdesign
Prerequisite
Steps 1-4 of the Stacked Cartesian flow must be completed.
1. Screen Layout
On the left is the series design form, on the right is the live chart preview.
2. Series Display (for Stack Layers)
In the Stacked flow, "Series Name" is not a single field; a separate card appears for each stack layer. Each card has:
| Field | Description |
|---|---|
| Stack Category Name | Unique value in the Stack By column (auto-filled, read-only) |
| Series Color | Color choice for this category |
Color Palette Recommendation
- Absolute Stacked: Colors should be distinct (blue, orange, green, purple — qualitative palette).
- 100% Stacked: Use sequential palettes (e.g., light-medium-dark blue tones for Shifts 1-2-3).
- In product categories use brand colors (red = A series, blue = B series).
3. Data Label Settings
| Field | Description | Unit |
|---|---|---|
| Show Data Labels | Value label on each stack segment | toggle |
| Data Label Text Color | Label text color | color |
| Data Label Font Size | Label font size | px |
| Data Label Position | Label position (Center, Top, etc.) |
enum |
Data Label in Stacked
If each segment is labeled in Stacked Column, visual clutter increases. For only the label above the total, set Position = Outer Top and Show Data Labels can be enabled only on the top layer (control from the UI dropdown).
Data Label Unit in 100% Stacked
In 100% variants, data labels appear as percentages. If you want to see 45 instead of 45%, use the main absolute Stacked type.
4. Column Settings (Stacked Column / Stacked Bar / 100 variants only)
Additional fields in Column-based Stacked types:
| Field | Description | Unit |
|---|---|---|
| Column Width | Bar width | px |
| Column Spacing | Spacing between two bar groups | px |
For Stacked Area / Stacked Line / Stacked Line 100, Column Settings are not visible; instead, fields like Stroke Width / Fill Opacity appear.
5. Stacked Area / Line Additional Settings
| Field | Description | In Which Type |
|---|---|---|
| Fill Opacity | Area fill transparency | Stacked Area, Stacked Area 100 |
| Stroke Width | Line thickness | Stacked Line, Stacked Line 100 |
| Marker Visibility | Data point symbol | Stacked Line, Stacked Area |
6. If the Preview Appears Frozen
If the preview panel does not refresh, click on a field in the form again to trigger a focus change.
7. Confirmation
When you click the Next button at the top right, flow.hasSeriesDesign = true is marked and you proceed directly to 7. General Design (6. Add Series is skipped).
8. Next Step
There Is No Step 6 in Stacked
Layers automatically generated from the Stack By column do not require manual "Add New Series"; the wizard skips directly to Step 7.