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 Editing The Code

Range Bar Chart With Additional Customization

Try Editing The Code

  Integrations:    

  Also See:    

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

26 Comments

  1. Nicolas says:

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

  2. andrei.turcu says:

    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?

    • Anjali says:

      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. Jason says:

    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. Pruthvi Kumar says:

    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,

    Pruthvi

  5. Pruthvi says:

    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.

    Cheers

  8. Dayana Patel says:

    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?

  9. Robert says:

    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 !!

  10. Gus says:

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

  11. Vignesh says:

    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 tip.is there anyway if both min and max values are same,we can show small line instead of nothing .

  12. SteveT says:

    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.

    • Vishwas R says:

      Steve,

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

  13. SteveT says:

    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!

  14. Xavier says:

    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)

  15. Benjamin says:

    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