Creating floating bar charts with Plotly

plotly.js
1

Hi.

What’s the best way to create a floating bar chart with Plotly? Here are two examples illustrating what I mean:


http://www.highcharts.com/demo/columnrange

I’m looking to plot several dozen ranges - each with a start value and end value - as a horizontal bar chart. So far, the closest I’ve managed to get with Plotly is a horizontal box plot (e.g. https://plot.ly/javascript/box-plots/#rainbow-box-plot). I’ve avoided the lines and caps by limiting each trace to two values, namely the upper and lower bounds. Is there a better way to create charts of this type?

Thanks in advance for your help.
Tom

1 Like
2

Here’s how: http://codepen.io/etpinard/pen/LxeQpp

3

Thanks etienne - I wasn’t familiar with the ‘base’ attribute, very helpful.

I suppose for datasets like mine (value pairs corresponding to upper and lower bounds), this means an extra step is required - set the lower values as the ‘base’ array, then calculate the size/width of each individual trace and set those values as the ‘x’ array. Hope this is helpful to anyone looking to create something similar.

4

Here’s my fork of the above, showing multiple bars with different colours on same line https://codepen.io/nite/pen/KyYRYZ