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

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