5. Series Design — Circular
In this step, the Circular widget's visual settings are configured: slice/ring colors, angle configuration, radius/inner radius, border, and data labels.
Wizard route: /cartography/add/seriesdesign
Back Button Behavior
If you return with Back from this step, the series configuration that was created is deleted.
1. Screen Layout
On the left is the series design form; on the right is the live chart preview.
2. Series Display
| Field | Description |
|---|---|
| Series Name | Series name to appear in legend / tooltip |
| Series Color | Default slice color (each slice automatically takes from palette) |
3. Pie Settings (For Pie / Doughnut)
| Field | Description |
|---|---|
| Radius | Pie radius (% of card height) |
| Start Angle | Starting angle of the first slice (°) |
| End Angle | Ending angle of the last slice (°) |
| Stroke Color | Slice border color |
| Stroke Width | Slice border thickness |
| Explode | Pull the selected slice outward (toggle) |
| Explode Index | Which slice to explode (starts from 0) |
| Explode Offset | Explode distance (default 0.1) |
Highlight with Explode
Highlight the largest or critical slice with explode. For example, in a production defect analysis, bring the "Defect" slice forward with Explode Index = 0 (if it's the largest) or the index corresponding to that slice.
4. Doughnut Settings (Doughnut Only)
In addition to Pie settings:
| Field | Description |
|---|---|
| Inner Radius | Inner hole radius (the donut hole) |
Doughnut Inner Radius
If you keep Inner Radius in the 0.5 - 0.7 range, you create a central area for displaying a total KPI value. A theme-dependent feature may be available to add an annotation in the center in Step 7 General Design.
5. Radial Bar Settings (Radial Bar Only)
| Field | Description |
|---|---|
| Radius | Outer radius |
| Inner Radius | Inner radius |
| Corner Style | Bar end shape (bothFlat, bothCurve, etc.) |
| Track Opacity | Background track transparency |
| Gap | Gap between bars |
| Track Color | Background track color |
Radial Bar Track
The track (background trace) is the "empty" part of each ring. The operator sees how close to the target they are by comparing it to the track. Choose a light tone for Track Color (e.g., #E5E7EB).
6. Data Label Settings
For Pie / Doughnut:
| Field | Description |
|---|---|
| Show Data Labels | Value/percentage label on each slice |
| Data Label Text Color | Label text color |
| Data Label Font Size | Label text size (px) |
| Data Label Position | Inside / Outside / Hidden |
| Data Label Content | Value / Percentage / Name + Percentage |
| Data Label Alignment | near, center, far |
| Data Label Overflow Mode | Behavior for labels that don't fit (hide, trim, shift) |
Percentage Display
For Pie/Doughnut, select Data Label Content = Percentage. When the operator wants to see share rather than absolute value, it is more readable.
7. Preview
If the preview panel is not refreshing, click on a field in the form again to trigger a focus change.
8. Confirmation
When you click the Next button at the top right, flow.hasSeriesDesign = true is marked and you go directly to 7. General Design (Step 6 Add Series is skipped).
9. Next Step
Step 6 Is Skipped
There is no multiple series in the Circular group; the wizard goes directly to Step 7.