Area Charts

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

Area charts are similar to line charts but with the area below the line filled in. This emphasizes the magnitude of changes over time and is particularly effective for showing cumulative totals and volume.

When to use Area Charts

Area charts work best when you want to:

• Emphasize the magnitude or volume of change over time

• Show cumulative trends (running totals)

• Display multiple series that add up to a total (stacked area charts)

• Highlight the scale of values alongside the trend

Configuring Your Area Chart

Setting the X-Axis

The X-Axis should represent a continuous time dimension or sequential progression:

Best practices for X-Axis:

• Date/Time fields: Created Date, Order Date, Completed On, etc. (then choose grouping: Year, Quarter, Month, Week, or Day)

• Sequential periods: Time slots, Periods, Phases

• Ordered intervals: Any time-based or sequential field

Using date fields: Select an actual date field (like "Created Date" or "Order Date"), then choose how to group the dates: Year, Quarter, Month, Week, or Day. 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 tracking cumulative customer growth, set your X-Axis to "Created Date" and group by "Month".

Adding Series (Y-Axis Values)

Series represent the values you want to measure over time. The filled area visually emphasizes the volume of data.

For each series, you'll configure:

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

2. Aggregation Method: How to calculate the value at each point

   • Sum: Total value at each point

   • Count: Number of records at each point

   • Average: Mean value at each point

   • Cumulative Sum: Running total over time (especially powerful for area charts)

3. Series Label: A clear name describing what the area represents

Example Configuration

Scenario: Show cumulative revenue growth over months

X-Axis Configuration:

• Field: Order Date

• Group by: Month

Series 1:

• Label: "Cumulative Revenue"

• Y-Axis Value: Revenue field

• Aggregation: Sum

This creates an area chart where the filled area grows with total revenue each month, clearly showing growth magnitude.

Single vs. Stacked Area Charts

Single Area Chart

Shows one metric over time:

• Total orders per week

• Cumulative customer count

• Weekly revenue

The area emphasizes volume and makes it easy to see the scale of values.

Stacked Area Chart

Shows multiple series that add up to a total:

• Revenue broken down by product category

• User count by subscription tier

• Support tickets by priority level

Each series stacks on top of the previous one, showing both individual contribution and total volume.

Example of Stacked Area Chart

Scenario: Show revenue composition by product type over time

X-Axis Configuration:

• Field: Sale Date

• Group by: Month

Series 1:

• Label: "Software Revenue"

• Y-Axis Value: Revenue field

• Aggregation: Sum

• Filter: Product Type = "Software"

Series 2:

• Label: "Hardware Revenue"

• Y-Axis Value: Revenue field

• Aggregation: Sum

• Filter: Product Type = "Hardware"

Series 3:

• Label: "Services Revenue"

• Y-Axis Value: Revenue field

• Aggregation: Sum

• Filter: Product Type = "Services"

This creates a stacked area chart showing how each product type contributes to total revenue over time.

Common Use Cases

Cumulative Growth

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

• Series: Total Customers (Count), Total Revenue (Sum)

• Shows accumulation over time

Volume Over Time

• X-Axis: Timestamp (grouped by Day or Hour)

• Series: Orders (Count), Pageviews (Count)

• Emphasizes busy vs. quiet periods

Composition Changes

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

• Series: Multiple revenue streams or cost categories (stacked)

• Shows how the mix changes while highlighting total volume

Resource Utilization

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

• Series: Hours by Project (stacked)

• Shows total capacity usage and allocation

Tips for Better Area Charts

1. Use for time-series data: Area charts work best with continuous time-based X-Axis values

2. Emphasize cumulative metrics: Area charts excel at showing running totals and accumulation

3. Limit stacked series: When stacking, use 3-5 series maximum for readability

4. Order stacked series logically: Place the most important or most variable series at the bottom

5. Consider transparency: Overlapping areas benefit from transparency (automatic in most chart tools)

6. Start Y-Axis at zero: The filled area loses meaning if the axis doesn't start at zero

7. Add context with titles: Clearly indicate whether values are cumulative or per-period

Area Chart vs. Line Chart

Choose an area chart when:

• ✅ You want to emphasize volume or magnitude

• ✅ You're showing cumulative totals

• ✅ The filled area adds meaningful context

Choose a line chart when:

• ✅ You want to focus on the trend rather than volume

• ✅ You have many overlapping series

• ✅ Precise value comparison is more important than volume