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 ( 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

• Doughnut Chart Widget – Similar with center hole
• Bar Chart Widget – Better for many categories
• Simple Table Widget – Exact values