See here for the example code that generated this page

AreaChart Examples

This page demonstrates the key features of AreaChart plots in JSPlots.

Continuous areas: Smooth filled areas for continuous x values (like dates)
Discrete areas: Bar-style areas for categorical x values
Stack modes: Unstack (overlapping), stack (cumulative), normalized stack (percentage), and dodge (side-by-side bars)
Grouping: Multiple series with automatic color assignment and legend
Interactive filters: Dropdown menus to filter data dynamically
Dynamic controls: Change X-axis, grouping, stacking, and faceting on the fly
Faceting: Facet wrap (1 variable) and facet grid (2 variables)

Example 1: Regional Sales Over Time (Stacked Area Chart)

Continuous time series with dates on x-axis. Stacked areas show cumulative sales across regions.

Plot Attributes

Stack mode:

Axes

X: Date

X Transform:

Y: Sales

Y Transform:

Aspect Ratio: 0.4 (0.25 - 2.5)

Data: sales_by_region

Example 2: Product Values - Continuous Unstack

Continuous x-axis (numeric). Overlapping areas with transparency allow comparison of individual trends.

Plot Attributes

Stack mode:

Axes

X: Time

X Transform:

Y: Value

Y Transform:

Aspect Ratio: 0.4 (0.25 - 2.5)

Data: product_values

Example 3: Market Share Distribution (Normalized Stack)

Continuous numeric x-axis. Normalized stacking shows relative proportions - total always reaches 100%.

Plot Attributes

Stack mode:

Axes

X: Month

X Transform:

Y: MarketShare

Y Transform:

Aspect Ratio: 0.4 (0.25 - 2.5)

Data: market_share

Example 4: Headcount by Department (Discrete/Stacked Bars)

Categorical x-axis. When x values are discrete, areas automatically become stacked bars.

Plot Attributes

Stack mode:

Axes

X: Department

X Transform:

Y: Headcount

Y Transform:

Aspect Ratio: 0.4 (0.25 - 2.5)

Data: headcount_data

Example 5: Revenue by Channel with Filters

Continuous date axis with interactive filters. Select different years and regions to update the view.

Filters

Region:

Year: 2022 - 2024

Plot Attributes

Stack mode:

Axes

X: Date

X Transform:

Y: Revenue

Y Transform:

Aspect Ratio: 0.4 (0.25 - 2.5)

Data: channel_revenue

Example 6: Metrics by Source (Facet Wrap)

Continuous x-axis with faceting. Each facet shows one metric with stacked sources.

Plot Attributes

Stack mode:

Axes

X: Week

X Transform:

Y: Value

Y Transform:

Facets

Facet by:

Aspect Ratio: (0.25 - 2.5)

Data: metrics_data

Example 7: Sales by Product and Region (Facet Grid)

Continuous x-axis with 2D facet grid. Products in rows, Regions in columns.

Plot Attributes

Stack mode:

Axes

X: Month

X Transform:

Y: Sales

Y Transform:

Facets

Facet 1:

Facet 2:

Aspect Ratio: (0.25 - 2.5)

Data: grid_sales

Example 8: Business Metrics with Dynamic Controls

Continuous x-axis. Use dropdowns to dynamically change: Y metric, grouping variable, stack mode, and faceting.

Plot Attributes

Color by:

Stack mode:

Axes

X: Quarter

X Transform:

Y Transform:

Facets

Facet 1:

Facet 2:

Aspect Ratio: 0.4 (0.25 - 2.5)

Data: business_metrics

Stack Mode Comparison

The following three charts use the same data but different stack modes to illustrate their differences:

Stack Mode: UNSTACK

Areas overlap with transparency - see individual trends clearly

Plot Attributes

Stack mode:

Axes

X: Time

X Transform:

Y: Value

Y Transform:

Aspect Ratio: 0.4 (0.25 - 2.5)

Data: compare_data

Stack Mode: STACK

Areas are stacked - shows cumulative total and individual contributions

Plot Attributes

Stack mode:

Axes

X: Time

X Transform:

Y: Value

Y Transform:

Aspect Ratio: 0.4 (0.25 - 2.5)

Data: compare_data

Stack Mode: NORMALIZED STACK

Areas are stacked and normalized to 100% - shows relative proportions over time

Plot Attributes

Stack mode:

Axes

X: Time

X Transform:

Y: Value

Y Transform:

Aspect Ratio: 0.4 (0.25 - 2.5)

Data: compare_data

Dynamic X-Axis Selection

This example demonstrates how to dynamically change the X-axis dimension from within the HTML page.

Try switching between Quarter, Month, and Week views using the dropdown control!

Example 10: Sales with Dynamic X-Axis Selection

Use the X-Axis dropdown to switch between different time granularities (Quarter/Month/Week). Also switch between Revenue and Units on Y-axis.

Plot Attributes

Stack mode:

Axes

X Transform:

Y Transform:

Aspect Ratio: 0.4 (0.25 - 2.5)

Data: sales_data_x

Dodge Mode (Grouped Bars)

Dodge mode places bars side-by-side for each x value, making it easy to compare groups directly.

This mode only works with discrete (categorical) x values. For continuous x values, it falls back to unstack mode.

Example 11: Sales by Store (Dodge Mode)

Dodge mode with discrete x-axis. Bars for each product are placed side-by-side within each store for easy comparison.

Plot Attributes

Stack mode:

Axes

X: Store

X Transform:

Y: Sales

Y Transform:

Aspect Ratio: 0.4 (0.25 - 2.5)

Data: sales_by_store

Dodge vs Stack Comparison

The following two charts show the same data using dodge and stack modes:

Dodge Mode - Side-by-Side Comparison

Bars are placed next to each other, making it easy to compare segments within each category.

Plot Attributes

Stack mode:

Axes

X: Category

X Transform:

Y: Value

Y Transform:

Aspect Ratio: 0.4 (0.25 - 2.5)

Data: comparison_data

Stack Mode - Cumulative View

Bars are stacked, showing the total value and how each segment contributes to it.

Plot Attributes

Stack mode:

Axes

X: Category

X Transform:

Y: Value

Y Transform:

Aspect Ratio: 0.4 (0.25 - 2.5)

Data: comparison_data

Struct Data Source Example

This area chart uses data from a struct containing multiple DataFrames. The RegionalSalesData struct holds both monthly_sales and quarterly_summary. Charts reference the monthly sales using Symbol("regional.monthly_sales").

Example 13: Regional Sales from Struct Data Source

This chart references a DataFrame field within a struct. The RegionalSalesData struct contains monthly_sales and quarterly_summary DataFrames.

Plot Attributes

Stack mode:

Axes

X: Month

X Transform:

Y Transform:

Aspect Ratio: 0.4 (0.25 - 2.5)

Data: regional.monthly_sales

Key Features Summary

Automatic discrete/continuous detection: Continuous x values (dates, numeric) create smooth areas; discrete x values (categories) create stacked bars
Four stack modes:
- Unstack: Overlapping areas with transparency - best for comparing trends
- Stack: Cumulative areas - best for showing total and parts
- Normalized stack: Percentage areas - best for showing proportions
- Dodge: Side-by-side bars (discrete x only) - best for direct comparison between groups
Dynamic X-axis selection: Switch between different X-axis dimensions (e.g., Quarter/Month/Week) from dropdown
Dynamic grouping: Choose which variable to group/color by from dropdown
Interactive filters: Filter data dynamically with dropdown menus
Faceting: Create small multiples with 1 or 2 faceting variables
Customization: Control opacity, titles, and stack modes
Date support: Automatic formatting and proper handling of date-based time series

Tip: Hover over areas to see detailed values. Use the dropdown controls to explore different views of your data!

This page was created using JSPlots.jl v0.4.0.