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

Horizontal Range Bar Chart Example

This example shows a horizontal range bar chart built with AG Charts, comparing two low-to-high spans per category so a shift between them reads as a change in both position and width. An item styler separates the pair by opacity, the category axis labels are switched off in favour of range cross lines that group and name each pair, and the value axis sits along the top.

Get started with JavaScript, React, Angular or Vue.

  • Copy Link
  • New Tab

More Chart Examples

View All Examples

Range Bar Chart Example
Range Bar Chart With Labels Example
Range Bar Chart with Multiple Series Example
Horizontal Range Bar Chart With Labels Example
Horizontal Range Bar Charts with Multiple Series Example
Range Area 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