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