HTML5 Range Bar Charts

Range Bar Chart is same as Range Column Chart except that in X axis is Vertical axis and Y axis is Horizontal. Unlike normal Bar Charts, Range Bars are floating with their position and length being dependent on two y values -low and high.

Cannot be combined with: Any chart type except Bar and Stacked Bar charts.

Range Bar Chart Specific Properties

Applies To Attribute Type Default Options/Examples
dataSeries bevelEnabled Boolean false true,false
dataSeries fillOpacity Number 1 .2,.3 etc.

Basic Range Bar Chart

Try it Yourself by Editing the Code below.

Range Bar Chart With Additional Customization

Try it Yourself by Editing the Code below.

If you have any questions, please feel free to ask in our forums.Ask Question

Comments 26

  1. Is it possible to have datetime on axisY, with interval like number of milliseconds or something like this ?

  2. Is it possible to display indexlabel like end-start and only once? In your example I would like to display 33-17 = 5 somewhere in the middle of the bar and so on for the rest the bars?

    • Andrei,

      As of now this feature is not available. But we are planning to implement formatter function for indexLabels which should allow you to do the same. This feature will be available in 3-4 weeks.

  3. Is it possible to hide/remove the first and last “Y Axis” used in the above sample? Referencing the chart above, if the data starts/ends at 17/38, don’t show the 16* and 40*. Even in the above sample, the C on the 40 is clipped.

  4. Hello,

    I would like to know if there is an option to display the index label only at the top. Right now, {y[#index]} displays values both at top and bottom. My requirement is to display only at the top. Please advise asap since i am struggling with crucial deadlines. Thank you in advance,


  5. Thanks Anjali. CanvasJs is one superb API. I needed a quickfix so dealt a proxy wrkaround using stackedColumn charts. ?

    Thanks for this suggestion. Definitely usefull going forward.


  6. In Xaxis i have fixed 4 labels values. But sometime probably it will not available in particular graph.
    But I want to display 4 fixed Xaxis labels value in any graph.
    is it possible?

  7. Love your product.

    I am trying to create a very simple gantt chart. To do this, I need a range of dates on the X-Axis, at the top. Can you show me an example of this? This would represent my task durations as defined by their start and stop dates.

    Thanks !!

  8. Is it possible to have dynamic timeline (moving) with blocks of datasources in seperate swimlanes (like a live rolling calendar)?

  9. Hi ,
    In my RangeBar Chart say min and max values same 17,it does not appear in the graph but when i go to 17 in the graph i can see tool there anyway if both min and max values are same,we can show small line instead of nothing .

  10. Why is it so hard to enable date formatting on the axis-y for the Range bar charts? It would make possible the only chart I desire to do with canvasjs!
    I want to do a planting calendar for various edible plants – plant names on the vertical axis-x, with seeding, transplanting and harvest ranges on the axis-y.

    • Steve,

      Date values are not yet supported on Y Axis yet. It is in our roadmap and we’ll surely implement in future versions.

  11. Is it not a little lazy, programmatically, to swap the axis-x and axis-y when using the range bar chart? That is very confusing!

  12. Is it possible to draw a mark (dot or vertical line) over the drawing –
    That would allow to draw the actual temperature AND the minimal/maximal values
    (Goal : draw a value, and its confidence interval)

  13. Is it possible to make only ONE indexLabel instead of two? I assume it is just related to the range bar chart, and we cannot work on the HTML5 object to fix it with CSS :/

If you have any questions, please feel free to ask in our forums. Ask Question