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