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

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

• Pie Chart Widget – Traditional pie chart
• Bar Chart Widget – Better for many categories
• Simple Table Widget – Exact values