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), and normalized stack (percentage)
- 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
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
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
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
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
Plot Attributes
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
Faceting
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
Faceting
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
Faceting
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
Data: compare_data
Stack Mode: STACK
Areas are stacked - shows cumulative total and individual contributions
Plot Attributes
Data: compare_data
Stack Mode: NORMALIZED STACK
Areas are stacked and normalized to 100% - shows relative proportions over time
Plot Attributes
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
Data: sales_data_x
Key Features Summary
- Automatic discrete/continuous detection: Continuous x values (dates, numeric) create smooth areas; discrete x values (categories) create stacked bars
- Three 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
- 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.