Sunburst EChart

A Sunburst EChart is a multi-level pie chart used to visualize hierarchical data through concentric circles. The innermost circle represents the root node, with outer rings showing deeper levels of hierarchy. Each ring segment corresponds to a child node, sized equally or proportionally based on values. This format helps users easily identify relationships within complex datasets.

Create a Sunburst EChart

1. In the Dashboard Designer, click the Custom Visualization icon.

2. Drag the Sunburst EChart onto the canvas.

3. In the Data Binding panel (right-side), click Add and select your dataset.

4. Bind fields as follows:

   • Values: Quantitative field (e.g., Revenue)

   • Details: Hierarchical categorical fields (e.g., Product Line, Product Category)

   Tip: Add multiple fields to Details in hierarchical order (e.g., parent to child).

5. To show names and percentages on the chart:

   • Open the Inspector (gear icon)

   • Enable Show Data Label, Value, and Details

   • In Display Pattern, choose Detail Value/Percentage for percentage display

6. Click Preview to view your Sunburst chart.

Format Data

Use the options in the Data Field containers to customize data display:

• Aggregation Method: Summarize values using Sum, Average, Count, etc.

• Quick Functions: Apply advanced calculations (e.g., Running Total, Ranking)

• Filter: Show only relevant data

• Rename: Make field names more meaningful

• Remove: Exclude fields

• Tooltip Settings: Customize tooltip appearance and content

Analyze Data

From the Action Bar, you can:

• Filter: Isolate data of interest

• Sort: Organize data meaningfully

• Conditional Visualization: Highlight values based on conditions

• Data Binding: Adjust data attributes on the fly

• Reference Line: Add static reference indicators

Customize Appearance

Use the Inspector Panel to fine-tune your chart.

Chart Style

• Maintain Color Assignments: Keep or auto-assign colors

• Palette: Choose chart colors

• Graph Opacity and Auto Gradient

• Custom ECharts Option and Custom Behavior: Add JavaScript customizations

• Start Angle, Radius, Item Space Color

Animation

• Entrance Animation: Control how the chart appears

• Automatic Carousel: Cycle through segments automatically

Interaction

• Enable features like:

  • Cross Filter

  • Jump To (navigate to other views)

  • Auto Refresh

  • Click Actions (e.g., Show Tooltip, Exclude)

Title and Labels

• Configure Title, font, and alignment

• Under Data Labels:

  • Control position, format (e.g., percentage), and font styling

Tooltip

• Set Tooltip Mode to display segment information on hover

Drill Down

• Customize drill bar position, label font, and colors

Special Data

• Replace null or blank values with placeholders

No Data Content

• Define content and styling when data is unavailable

Layout & Appearance

• Adjust position, size, padding, margins, and background

• Add borders, shadows, or background images

• Toggle visibility