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
Range Bar Chart With Additional Customization
Integrations:
Comments 26
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix
Is it possible to have datetime on axisY, with interval like number of milliseconds or something like this ?
nicolas,
Y axis can only be numeric as of now.
Bad, bad, bad… Why is this not possible? Dealbreaker for me. And it took me one hour of fiddling until I googled the problem and ended up here…
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.
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.
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
pruthvi,
Yes, you can do the same using indexLabelFormatter as shown here.
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
How to remove vertical lines?
Hi, is it possible to create a stacked range bar chart?
Sorry, Stacked Range Bar charts are not available yet.
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?
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 !!
Is it possible to have dynamic timeline (moving) with blocks of datasources in seperate swimlanes (like a live rolling calendar)?
Cheers
Gus,
Kindly provide us with a link/image which depicts the chart-type you are looking for.
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 .
Vignesh,
Thanks for reporting. We consider it for future versions.
Hi,
Please let me know once the feature is out.It will be really useful one.currently iam tweaking my data show small line..
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.
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!
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)
Sorry Xavier as of now drawing marker along with bar chart is not possible.
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 :/
Benjamin,
Yes its possible to show only one indexLabel in range charts. Range Charts have two indexLabels – one for each y value but you can show only one indexLabel using indexLabelFormatter. Check this example.