AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search⌘ KCtrl K
  • Examples
  • Gallery
  • Docs
  • API
  • Community
  • Pricing
  • Contact Us
  • GitHub
  • AG Grid
  • AG Studio
  • Bryntum Gantt
  • Bryntum Scheduler
  • Bryntum Scheduler Pro
  • Bryntum Calendar
  • Bryntum Task Board
  • Examples
  • Gallery
  • Docs
  • API
  • Community
  • Pricing
  • Contact Us
  • GitHub

100% Stacked Area Chart Example

This example shows a 100% stacked area chart built with AG Charts, showing how the composition of a total shifts over time by normalising all seven series to 100% at every date. Pattern fills set two series apart from the solid ones, percentage axis labels read as shares, and a dashed crosshair tracks the pointer along the time axis.

Get started with JavaScript, React, Angular or Vue.

  • Copy Link
  • New Tab

More Chart Examples

View All Examples

Area Chart Example
Area Chart With Labels Example
Stacked Area Chart Example
Area Chart With Markers Example
Area Chart With Negative Values Example
Scatter Chart Example

© AG Grid Ltd 2015-2026

AG Grid Ltd registered in England & Wales.
Company No. 07318192.
VAT no. GB998360167

Registered address
AG Grid Ltd
70 Wilson Street
London
EC2A 2DB

Documentation
  • Getting Started
  • Roadmap
  • Changelog
  • Pipeline
  • Documentation Archive
Support & Community
  • Blog
  • Stack Overflow
  • License & Pricing
  • Support via Zendesk
  • Security
The Company
  • AG Grid
  • AG Studio
  • About
  • Contact Us
Follow
  • GitHub
  • X
  • YouTube
  • LinkedIn
  • Terms of Use
  • Privacy Policy
  • Cookies Policy
  • Manage Cookies
  • Modern Slavery
  • Sitemap