7. General Design — Stacked Cartesian
In this step, the Stacked widget's chart-level visual settings are configured: title, legend, tooltip, X/Y axis titles, plot area, zoom behavior, trackball.
Wizard route: /cartography/add/generaldesign
Prerequisite
Steps 1-5 of the Stacked Cartesian flow must be completed (Step 6 Add Series is skipped).
1. Screen Layout
2. Chart Title
| Field | Description |
|---|---|
| Show Title | Title visibility (toggle) |
| Title Text | Title text |
| Title Color | Title text color |
| Title Font Size | Font size (px) |
| Title Font Weight | Normal / Bold / SemiBold |
| Title Background Color | Background color |
| Title Border Color | Border color |
| Title Border Width | Border thickness (px) |
| Title Alignment | Left / Center / Right |
3. Legend (Critical in Stacked)
In the Stacked flow, each stack layer appears as a separate item in the legend. Without the legend, users cannot tell which layer corresponds to which category.
| Field | Description | Possible Values |
|---|---|---|
| Show Legend | Keep this on at all times in Stacked | toggle |
| Legend Position | Position | top / bottom / left / right |
| Legend Text Color | Text color | color |
| Legend Font Size | Font size | px |
| Legend Font Weight | Normal / Bold | enum |
| Legend Overflow Mode | Overflow behavior | wrap / scroll |
Stacked Legend Position
- 4-5 layers:
toporbottom(fits horizontally) - 6+ layers:
right(vertical listing improves readability)
4. Tooltip (Total Info in Stacked)
| Field | Description |
|---|---|
| Show Tooltip | Tooltip visibility (toggle) |
| Tooltip Background Color | Background color |
| Tooltip Border Color | Border color |
| Tooltip Border Width | Border thickness (px) |
| Tooltip Text Alignment | Text alignment |
| Tooltip Text Color | Text color |
| Tooltip Font Size | Font size (px) |
| Tooltip Font Weight | Normal / Bold |
Tooltip for Stack Detail
In Stacked widgets, the tooltip on hover shows all layer values at that point and the total. Setting Tooltip Show = Off reduces the reading experience.
5. X Axis
| Field | Description | Unit |
|---|---|---|
| X Axis Name | Axis title (e.g., "Shift", "Day") | text |
| X Axis Title Font Size | Axis title font size | px |
| X Axis Label Font Size | Tick label font size | px |
| X Axis Interval | Tick interval | number |
| X Axis Minimum | Minimum value | number / date |
| X Axis Maximum | Maximum value | number / date |
6. Y Axis
| Field | Description | Unit |
|---|---|---|
| Y Axis Name | Axis title (e.g., "Total Count", "Share (%)") | text |
| Y Axis Label Suffix | Suffix appended after numbers (pcs, kWh, %) |
text |
| Y Axis Title Font Size | Axis title font size | px |
| Y Axis Label Font Size | Tick label font size | px |
| Y Axis Interval | Tick interval | number |
| Y Axis Minimum | Minimum value | number |
| Y Axis Maximum | Maximum value | number |
Y Axis Suffix — For 100% Variants
Use % as Y Axis Label Suffix for Stacked Column 100 / Stacked Bar 100 / Stacked Line 100. For absolute Stacked charts use whatever the unit is (pcs, kWh, kg).
Y Axis Min/Max — For 100% Variants
In 100% variants, manually setting Y Min/Max is overridden by the backend. The range is automatically 0–100.
7. Plot Area
| Field | Description | Unit |
|---|---|---|
| Plot Area Border Width | Drawing area border thickness | px |
| Plot Area Background Color | Drawing area background color | color |
8. Zoom
| Field | Description |
|---|---|
| Pinch Zoom | Zoom with touchpad pinch (toggle) |
| Pan Mode | X / Y / XY pan |
| Zoom Mode | X / Y / XY zoom |
Stacked Area + Pan
For long time-series Stacked Area charts, choose Pan Mode = X; the user can drag the X axis.
9. Trackball
| Field | Description | Unit |
|---|---|---|
| Trackball Line Width | Trackball line thickness | px |
| Trackball Tooltip Font Size | Trackball tooltip font size | px |
10. Confirmation
When you click the Next button at the top right, flow.hasGeneralDesign = true is marked.