Doughnut Chart Widget
The Doughnut Chart widget is identical to the Pie Chart but with a hollow center, creating a modern ring appearance. It displays the same proportion and percentage data with a sleeker visual style.
When to Use
- Modern, clean aesthetic preferred over traditional pie charts
- Display center statistic (total value can appear in the hole)
- Show category proportions and distributions
- Same use cases as pie chart but with contemporary look
Difference from Pie Chart
| Feature |
Pie Chart |
Doughnut Chart |
| Center |
Filled |
Hollow (can show total) |
| Appearance |
Traditional |
Modern |
| Visual Weight |
Heavier |
Lighter, airier |
| Data Display |
Identical |
Identical |
| Use Cases |
Same |
Same |
Configuration Options
Content Settings
Title (Required)
Examples: "Sales Distribution", "Traffic Sources", "Profit by Category"
Data Type (Required)
Options:
-
Categorized Data: Category-grouped data (recommended)
-
Data Tables: Table data converted to chart
Metric (Required)
Select from:
- Product categories, tags, individual products
- Traffic sources and types
- Geographic regions (country, state)
- Order statuses, payment methods
- Customer segments
- Campaign data
- Expense categories
Metric Field
What to measure:
- total_revenue - Revenue contribution
- total_profit - Profit contribution
- order_count - Order volume
- units_sold - Quantity sold
- session_count - Traffic volume
Design Settings
Responsive Width
Desktop/Tablet/Mobile Columns (1-12)
Recommended: 6 columns (half width) for balanced layout
Color Theme
Options: Blue, Green, Purple, Orange, Red, Gray
Effect: Slices use gradient variations of chosen color
Show Legend
Options: On (default) / Off
Legend shows: Category name, color, value, percentage
Chart Height
Range: 200-1000 pixels (default: 450px)
Adjust for:
- Number of categories (more = taller)
- Legend size
- Visual balance with other widgets
Center Value Display
Doughnut Hole Content
The hollow center can display:
-
Total Value: Sum of all slices ($45,230)
-
Metric Label: What's being measured ("Total Revenue")
-
Count: Number of categories shown
-
Custom Text: Any text you specify
Example center display:
Total Revenue
$45,230
5 Categories
Example Configurations
Example 1: Revenue by Category
Title: Product Category Revenue
Data Type: Categorized Data
Metric: products.categorized_data.by_category
Metric Field: total_revenue
Color: Blue
Show Legend: On
Height: 450px
Width: 6 columns
Example 2: Traffic Distribution
Title: Traffic Source Breakdown
Data Type: Categorized Data
Metric: analytics.categorized_data.traffic_sources
Metric Field: session_count
Color: Purple
Show Legend: On
Height: 400px
Width: 6 columns
Example 3: Profit by Region
Title: Profit by Country
Data Type: Categorized Data
Metric: geographic.categorized_data.by_country
Metric Field: total_profit
Color: Green
Show Legend: On
Width: 6 columns
Example 4: Expense Categories
Title: Operating Expense Distribution
Data Type: Categorized Data
Metric: expenses.categorized_data.by_category
Metric Field: total_amount
Color: Red
Show Legend: On
Width: 6 columns
Best Practices
Optimal Slice Count
-
3-5 slices: Perfect clarity
-
6-7 slices: Still good
-
8+ slices: Getting crowded, consider alternatives
Slice Ordering
Slices automatically ordered by size (largest first, clockwise)
Using with Pie Charts
Mix and match in same report:
- Use pie chart for one comparison
- Use doughnut chart for another
- Provides visual variety
Pairing Strategy
Revenue + Profit side-by-side:
- Left: Revenue by Category (pie chart)
- Right: Profit by Category (doughnut chart)
- Visual variety while comparing related data
Common Use Cases
Portfolio Analysis
Understand product mix:
- Doughnut showing revenue by category
- Center displays total revenue
- Legend shows each category's contribution
Channel Attribution
See marketing channel effectiveness:
- Slices: Organic, Paid Search, Paid Social, Email, Direct, Referral
- Field: Order count or Revenue
- Identifies channel dependencies
Geographic Distribution
Visualize location-based sales:
- Slices: Top 5-7 countries or states
- Field: Revenue or Profit
- Shows geographic concentration
Interpreting Doughnut Charts
Balanced Distribution
Similar slice sizes = diversified, balanced portfolio
Concentrated Distribution
One large slice dominating = dependency risk
Long Tail
Many tiny slices = fragmented, may need consolidation
Troubleshooting
Issue: Too many small slices
Solution:
- Apply filter to show only top 5-7 categories
- Small categories auto-group into "Other" if configured
- Or switch to bar chart for better comparison
Issue: Chart appears empty
Check:
- Metric has data for date range
- Metric field exists and has values
- Filters not excluding all data
Issue: Percentages don't add to 100%
Cause: Rounding or filtering
This is normal: Display rounding can cause 99.9% or 100.1%
Related Widgets