## Bar Chart Widget

The Bar Chart widget displays data as vertical or horizontal bars, perfect for comparing values across categories, ranking items, and showing relative performance.

### When to Use

- Compare values across different categories (products, traffic sources, campaigns)
- Rank items by performance (top 10 products, best campaigns)
- Show relative sizes and proportions
- Display time-based comparisons (monthly totals)

#### Configuration Options

### Content Settings

#### Title (Required)

Examples: "Top Products by Profit", "Revenue by Category", "Monthly Sales"

### Data Type (Required)

Options:

- Data by Date: Time series data (bars for each time period)
- Categorized Data: Category-based data (products, categories, sources)
- Data Tables: Tabular data sources

### Metrics Configuration

For Data by Date:

- Select one or more metrics to display
- Multiple metrics create grouped or stacked bars
- Examples: Revenue, Profit, Orders, Costs

For Categorized Data:

- Select category type (Products, Categories, Traffic Sources, etc.)
- Select metric field to measure (Revenue, Profit, Units Sold, etc.)
- Optional: Select specific metric display format

### Metric Field (For Categorized Data)

What it is: The value to measure for each category

Examples:

- total_revenue - Total revenue per category
- total_profit - Total profit per category
- units_sold - Quantity sold per category
- average_order_value - AOV per category

#### Metric Display

Format options:

- Number (1,234)
- Currency ($1,234.56)
- Percentage (12.5%)
- Abbreviated (1.2K, 45.2K)

### Date Format (For Time Series)

Options: Auto, Day, Month, Quarter, Year

Determines: How time periods are grouped on X-axis

#### Design Settings

### Responsive Width

Desktop/Tablet/Mobile Columns (1-12)

Recommended:

- Primary bar charts: 12 columns (full width)
- Secondary charts: 6-8 columns
- Mobile: Always 12 columns

### Color Theme

What it controls: Bar colors

Available themes: Blue, Green, Purple, Orange, Red, Gray

Special feature: For profit/revenue metrics, bars can auto-color (green for positive, red for negative)

### Show Legend

Options: On/Off (default: On)

When to show: Multi-metric charts (grouped/stacked bars)

When to hide: Single metric charts where title is clear

### Chart Height

Range: 200-1000 pixels (default: 450px)

Adjust based on:

- Number of categories (more categories = more height needed)
- Bar orientation (horizontal bars need more height for many categories)
- Report context (dashboard vs detailed analysis)

#### Chart Interaction Features

### Hover Tooltips

Hovering over bars shows:

- Category/time period name
- Exact value
- Percentage of total (if applicable)

#### Click to Drill Down

Clicking a bar:

- Shows detailed data for that category/period
- Opens modal with breakdown
- Can filter report to just that category

### Sort and Filter

Use chart controls to:

- Sort by value (ascending/descending)
- Sort alphabetically
- Filter to show top N items

#### Example Configurations

#### Example 1: Top 10 Products by Profit

    	Title: Top 10 Most Profitable Products
    Data Type: Categorized Data
    Metric: Products → Product Performance
    Metric Field: total_profit
    Metric Display: Currency
    Color: Green
    Show Legend: Off
    Chart Height: 500px
    Width: 12 columns

Result: Vertical bars showing 10 products ranked by profit

#### Example 2: Revenue by Category

    	Title: Revenue by Product Category
    Data Type: Categorized Data
    Metric: Product Categories
    Metric Field: total_revenue
    Metric Display: Currency
    Color: Blue
    Show Legend: Off
    Height: 450px

#### Example 3: Monthly Sales Comparison

    	Title: Monthly Sales - Last 12 Months
    Data Type: Data by Date
    Metrics:
      - Revenue (blue)
      - Profit (green)
    Date Format: Month
    Show Legend: On
    Height: 450px
    Width: 12 columns

Result: Grouped bars showing revenue and profit for each month

#### Example 4: Traffic Source Performance

    	Title: Orders by Traffic Source
    Data Type: Categorized Data
    Metric: Traffic Sources
    Metric Field: order_count
    Metric Display: Number
    Color: Purple
    Height: 400px

### Bar Chart Variations

### Grouped Bars

When: Comparing 2-3 metrics across categories

Display: Bars side by side for each category

Example: Revenue and Profit bars for each product category

### Stacked Bars

When: Showing composition (parts of a whole)

Display: Bars stacked on top of each other

Example: Total costs broken down into Product Cost, Shipping, Fees

Note: Stacked bars configured through metrics array selection

#### Best Practices

### Bar Quantity

- 5-10 bars: Optimal for readability
- 11-15 bars: Acceptable, increase chart height
- 16+ bars: Consider filtering to top N, or use data table instead

### Sorting Strategy

- Value (descending): Show top performers first (most common)
- Value (ascending): Show lowest performers first (identify problem areas)
- Alphabetical: Rarely useful, prefer value-based sorting

### Color Usage

- Single color: Clean look for single-metric charts
- Multi-color: Use for grouped bars to distinguish metrics
- Conditional color: Green for positive profit, red for negative

#### Chart Height Guidelines

- 5 bars or less: 300-350px
- 6-10 bars: 400-450px
- 11-15 bars: 500-600px
- 16+ bars: 600-800px

### Common Mistakes to Avoid

#### Too Many Bars

Problem: 50 products in one chart - unreadable

Solution: Limit to top 10-15, use data table for complete list

### Wrong Metric Type

Problem: Using bar chart for time trends

Solution: Use line chart for trends, bar chart for category comparisons

#### Poor Color Choices

Problem: Similar colors for different metrics (light blue and dark blue)

Solution: Use contrasting colors (blue and orange, green and red)

### Inconsistent Sorting

Problem: Bars in random order

Solution: Always sort by value (descending for "top" charts)

#### Combining with Other Widgets

### Bar Chart + Data Table

- Bar chart shows top 10 visually
- Data table below shows complete list
- Best of both: visual + detailed

#### Metric Cards + Bar Chart

- Metric cards at top: Total revenue, profit, orders
- Bar chart below: Breaking down by category or time
- Shows both totals and distribution

### Multiple Bar Charts

- Side by side comparison
- Example: Products by Revenue (left) + Products by Profit (right)
- Shows if high-revenue products are actually profitable

### Related Widgets

- Line Chart Widget - Trend analysis
- Pie Chart Widget - Proportions
- Data Table Widget - Detailed data