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

Area Chart With Markers Example

This example shows an area chart built with AG Charts, comparing two overlaid series across categories with markers on each point. An item styler enlarges the markers for three chosen categories to draw the eye to them, cross lines annotate those categories with their change, and band highlight shades the category under the pointer.

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
100% Stacked Area Chart 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