Range Bar Chart Chart Guide & Documentation

Range Bar Chart

Use a rangeBar Chart to describe start and end value in a bar/column chart.
Helpful in plotting a timeline of events when one needs to display start and end values.

When plotting a range bar chart, you need to set chart.type: 'rangeBar' in the configuration.

Data Format

The data format for rangeBar is slightly different than other charts. ApexCharts assumes that your data is in the range format as given in the below example.

xy Format

The xy format accepts [{ x: category, y: [Start, End] }].


series: [{
  data: [{
    x: 'TEAM A',
    y: [65, 96]
  },
  {
    x: 'TEAM B',
    y: [55, 78]
  },
  .
  .
  .
  {
    x: 'TEAM C',
    y: [95, 186]
  }]
}]

Plotting time scale on the x-axis.

To plot a timescale on the x-axis, you should pass timestamp values in the y property. Like this


series: [{
  data: [{
    x: 'TEAM A',
    y: [1358447400000, 1358620200000]
  },
  {
    x: 'TEAM B',
    y: [1358447400000, 1358620200000]
  }]
}]