7. General Design — Circular
In this step, the Circular widget's chart-level visual settings are configured: title, legend, tooltip, and data label general settings. Unlike Cartesian, there are no X/Y axis, Plot Area, or Zoom sections — Circular is axis-free.
Wizard route: /cartography/add/generaldesign
1. Screen Layout
2. Chart Title
| Field | Description |
|---|---|
| Show Title | Title visibility (toggle) |
| Title Text | Title text (e.g., "Shift-Based Production Share") |
| Title Color | 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 Circular)
In Pie/Doughnut/Radial Bar, the legend is the key for category names; the color-to-category mapping appears here.
| Field | Description | Possible Values |
|---|---|---|
| Show Legend | Keep on at all times in Circular | 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 |
Legend Position
- 4-5 slices:
bottom(horizontal) — pie stays centered - 6+ slices or long label names:
right(vertical)
4. Tooltip
Slice name + value + percentage are shown on hover.
| 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 |
5. Data Label Settings (Circular General)
In addition to the series data labels in Step 5, general format settings are here:
| Field | Description |
|---|---|
| Show Data Labels | Value label on each slice |
| Data Label Text Color | Text color |
| Data Label Font Size | Font size (px) |
| Data Label Position | Inside / Outside / Hidden |
| Data Label Alignment | near / center / far |
| Data Label Overflow Mode | hide / trim / shift |
Step 5 vs Step 7 Data Label
Data label settings in Step 5 are series-specific; those in Step 7 are the common visual format for all slices. Together they provide a single consistent appearance across the chart.
6. Confirmation
When you click the Next button at the top right, flow.hasGeneralDesign = true is marked.