Pie Chart Widget
The Pie Chart widget displays data as slices of a circle, showing how individual parts contribute to the whole. Perfect for visualizing proportions and percentages at a glance.
When to Use
- Show how categories contribute to a total (revenue by category, traffic source breakdown)
- Display proportions and percentages
- Visualize composition (what makes up your revenue, costs, or traffic)
- Compare relative sizes of segments
When NOT to Use
- Showing trends over time (use line chart)
- Comparing exact values (use bar chart)
- More than 7-8 categories (use bar chart or table)
- Values that don't sum to a meaningful whole
Configuration Options
Content Settings
Title (Required)
Examples: "Revenue by Category", "Traffic Source Breakdown", "Expense Distribution"
Data Type (Required)
Options:
-
Categorized Data (default): Pre-grouped categories (Product Categories, Traffic Sources, etc.)
-
Data Tables: Tabular data sources converted to pie slices
Recommended: Categorized Data for most use cases
Metric (Required)
What it is: The data source and value to visualize
Available categorized metrics:
-
Product Performance: By category, by tag, by individual product
-
Traffic Sources: Traffic source breakdown
-
Geographic Data: By country, by state/region
-
Order Data: By status, by payment method, by shipping method
-
Customer Segments: New vs returning, by location
-
Campaign Data: By campaign, by platform
-
Expense Categories: Operating, Marketing, Personnel, etc.
How to select: Use searchable dropdown with dot notation (e.g., "products.categorized_data.by_category")
Metric Field (Optional)
What it is: Specific field to measure within the selected metric
Examples for Product Categories:
- total_revenue - Revenue per category
- total_profit - Profit per category
- units_sold - Units sold per category
- order_count - Orders per category
Leave blank to use default field (usually total_revenue)
Design Settings
Responsive Width
Desktop/Tablet/Mobile Columns (1-12)
Recommended:
- Standalone pie chart: 6 columns
- Side-by-side comparison: 6 columns each
- Small accent chart: 4 columns
Color Theme
Options: Blue, Green, Purple, Orange, Red, Gray
What it does: Provides base color palette - slices use variations of this color
Tip: Use color that matches the data meaning (Green for profit, Blue for revenue, Red for costs)
Show Legend
Options: On/Off (default: On)
What it shows: List of categories with their colors below the chart
When to disable: When categories are obvious or space is limited
Chart Height
Range: 200-1000 pixels (default: 450px)
Recommendations:
- 3-5 slices: 350-400px
- 6-8 slices: 450-500px
- Adjust for legend size
Visual Display
Pie Chart Appearance
Revenue by Category
╱───────╲
╱ 30% ╲
│ 40% │
│ 20% │
╲ 10% ╱
╲───────╱
Clothing (40%)
Accessories (30%)
Shoes (20%)
Other (10%)
Slice Details
- Each slice represents one category
- Slice size proportional to value
- Colors automatically assigned
- Labels can show outside slices
- Percentages display on hover or in legend
Example Configurations
Example 1: Revenue by Product Category
Title: Revenue Distribution by Category
Data Type: Categorized Data
Metric: products.categorized_data.by_category
Metric Field: total_revenue
Color: Blue
Show Legend: On
Height: 450px
Width: 6 columns
Result: Shows what % of revenue each category generates
Example 2: Traffic Source Breakdown
Title: Traffic Sources
Data Type: Categorized Data
Metric: analytics.categorized_data.traffic_sources
Metric Field: session_count
Color: Purple
Show Legend: On
Height: 400px
Width: 6 columns
Result: Visualizes traffic composition (Organic 45%, Paid 30%, Social 15%, etc.)
Example 3: Expense Distribution
Title: Operating Expenses by Category
Data Type: Categorized Data
Metric: expenses.categorized_data.by_category
Metric Field: total_amount
Color: Red
Show Legend: On
Height: 450px
Example 4: Order Status Distribution
Title: Orders by Status
Data Type: Categorized Data
Metric: orders.categorized_data.by_status
Metric Field: order_count
Color: Gray
Show Legend: On
Best Practices
Slice Quantity
-
3-5 slices: Ideal for clear visualization
-
6-7 slices: Still readable
-
8+ slices: Getting crowded - consider grouping small categories into "Other"
Small Slice Handling
Categories under 5% of total:
- Combine into "Other" category
- Or use bar chart instead for better comparison
Color Selection
- Use color theme that reflects data nature
- Ensure sufficient contrast between adjacent slices
- System automatically assigns color variations
Label Display
- Always enable legend for clarity
- For small slices, labels may appear outside with connecting lines
- Percentages show on hover
Common Use Cases
Revenue Composition Analysis
Understand what generates your revenue:
- Metric: Product Categories
- Field: Revenue
- Shows which categories are revenue drivers
Profit Distribution
See where profit comes from:
- Metric: Product Categories
- Field: Profit
- Compare to revenue pie to see margin differences
Marketing Channel Mix
Visualize traffic sources:
- Metric: Traffic Sources
- Field: Sessions or Order Count
- Shows dependency on different channels
Geographic Revenue
Understand geographic distribution:
- Metric: Geographic Data by Country
- Field: Revenue
- Identify top markets
Interpreting Pie Charts
Dominant Slices
Large slices (30%+): Major contributors, critical to performance
Action: Protect and optimize these categories
Small Slices
Tiny slices (<5%): Minor contributors
Action: Either grow them or consider discontinuing
Balanced Distribution
Many similar-sized slices: Diversified portfolio
Good: Less risky, not dependent on one category
Bad: May lack focus, spreading resources thin
Highly Concentrated
One slice 70%+: Heavy dependency on one category
Risk: If that category fails, business struggles
Action: Consider diversifying
Comparing Pie Charts
Side-by-Side Analysis
Create two pie charts next to each other (6 cols each):
Example 1: Revenue vs Profit by Category
- Left pie: Revenue by Category
- Right pie: Profit by Category
- Insight: See if high-revenue categories are also high-profit
Example 2: This Year vs Last Year
- Left pie: Category distribution this Q4
- Right pie: Category distribution last Q4
- Insight: How has product mix changed?
Troubleshooting
Issue: Too many slices, chart unreadable
Solutions:
- Apply data filter to show only top N categories
- Group small categories into "Other"
- Switch to bar chart for better comparison
Issue: No data showing
Check:
- Selected metric has data for date range
- Metric field is correct
- Filters aren't excluding all data
Issue: Colors too similar
Solution:
- Try different color theme
- Reduce number of slices
- System auto-assigns varied colors within theme
Issue: Labels overlapping
Solutions:
- Increase chart height
- Reduce number of slices
- Enable legend, disable direct labels
Related Widgets