Stacked Bar Charts

Learn how to build stacked bar charts using X-Axis values and Series

Stacked bar charts break down and compare parts of a whole across different categories by stacking bars. Each bar shows the total, while segments within the bar show the composition of that total.

When to use Stacked Bar Charts

Stacked bar charts are ideal when you want to:

  • Show part-to-whole relationships across categories

  • Compare both total values AND their composition

  • Display how different components contribute to a total

  • Track changes in composition over time

Configuring Your Stacked Bar Chart

Setting the X-Axis

The X-Axis represents your main categories or time periods that you want to compare:

Best practices for X-Axis:

  • Date fields for time periods: Select a date field (like "Created Date" or "Order Date"), then group by Month, Quarter, or Year (to show composition changes over time)

  • Categories: Department, Region, Product Line

  • Groups: Customer Type, Project Phase, Priority Level

Using date fields: Select an actual date field (like "Created Date"), then choose how to group the dates: Year, Quarter, or Month. Noloco automatically sorts dates chronologically (oldest to newest, left to right). You don't need a separate "Month" or "Year" field in your data.

Example: For showing ticket composition by month, set your X-Axis to "Created Date" and group by "Month".

Adding Series (Y-Axis Values)

In stacked bar charts, each series becomes a segment within the bar. All series stack on top of each other to show the total.

Key concept: Each series typically represents a different category or type that makes up your total. For example:

  • Different product types contributing to total sales

  • Different ticket statuses making up total tickets

  • Different expense categories in total spending

For each series, you'll configure:

  1. Y-Axis Value: The numeric field to measure

  2. Aggregation Method: How to calculate each segment

    • Sum: Total value for this segment

    • Count: Number of records in this segment

    • Average: Mean value for this segment

  3. Series Label: Name of this component/segment

  4. Filter (important!): Filter each series to only show the specific category it represents

Example Configuration

Scenario: Show support tickets by status across months

X-Axis Configuration:

  • Field: Created Date

  • Group by: Month

Series 1:

  • Label: "Open"

  • Y-Axis Value: (Record count)

  • Aggregation: Count

  • Filter: Status equals "Open"

Series 2:

  • Label: "In Progress"

  • Y-Axis Value: (Record count)

  • Aggregation: Count

  • Filter: Status equals "In Progress"

Series 3:

  • Label: "Closed"

  • Y-Axis Value: (Record count)

  • Aggregation: Count

  • Filter: Status equals "Closed"

This creates a stacked bar chart where each month's bar shows the total tickets, broken down by status.

How Series Filters Work

The key to stacked bar charts is using filters on each series:

  1. Each series shows data from the same table

  2. Apply a filter to each series to isolate a specific category

  3. The filters should be mutually exclusive (no overlap)

  4. Together, all series should represent the complete dataset

Example Pattern:

  • Series 1 Filter: Priority = "High"

  • Series 2 Filter: Priority = "Medium"

  • Series 3 Filter: Priority = "Low"

Common Use Cases

Sales Composition by Product Category

  • X-Axis: Order Date (grouped by Month)

  • Series 1: Electronics Sales (filtered to Category = "Electronics")

  • Series 2: Clothing Sales (filtered to Category = "Clothing")

  • Series 3: Home Goods Sales (filtered to Category = "Home Goods")

Budget vs. Actual Spending by Department

  • X-Axis: Department

  • Series 1: Allocated Budget (Sum of Budget field)

  • Series 2: Actual Spending (Sum of Spent field)

Ticket Distribution Over Time

  • X-Axis: Created Date (grouped by Week)

  • Series: One for each ticket status (Open, In Progress, Closed, etc.)

Revenue by Customer Type

  • X-Axis: Sale Date (grouped by Quarter)

  • Series 1: Enterprise Revenue (filtered to Type = "Enterprise")

  • Series 2: SMB Revenue (filtered to Type = "SMB")

  • Series 3: Individual Revenue (filtered to Type = "Individual")

Tips for Better Stacked Bar Charts

  1. Limit series count: 3-6 series work best. Too many segments become hard to read

  2. Use logical ordering: Stack series in a meaningful order (e.g., sequential stages, priority levels)

  3. Consistent colors: Keep the same series in the same color position across all bars

  4. Filter properly: Ensure your series filters don't overlap or leave gaps

  5. Consider alternatives: If you want to compare totals across categories rather than composition, use a regular bar chart instead

  6. Add context: Use titles and subtitles to explain what the stacks represent

100% Stacked Bar Charts

Some stacked bar charts can show percentages instead of absolute values:

  • Useful when you want to compare proportions rather than totals

  • All bars reach 100%, showing relative composition

  • Great for seeing how the mix changes even if totals vary

Last updated

Was this helpful?