Column bar chart based on timeline

plotly.js
1

I need to create a vertical bar chart where columns will be based on a timeline similar to a line chart. The critical thing is that I wan to have column widths be based on date-time ranges. Any idea how to do that?

Thanks

2

Hi @Zolotoy , you can control the width of each bar as described here https://plot.ly/python/bar-charts/#customizing-individual-bar-widths (for python) or here https://plot.ly/javascript/bar-charts/#customizing-individual-bar-widths (for javascript). Hope this helps!

3

Thanks for help. How would i relate column widths to x axis values which is a timeline?

Thanks

4

Could you please post some reproducible code with dummy data? I’m not sure I understand what you want to do.

5

Let’s say my x axis is a time series and might look like this:

var data = [
  {
    x: ['2013-10-04 22:23:00', '2013-10-04 23:00:00', '2013-10-04 23:23:00'],
    y: [1, 3, 6],
    type: 'bar'
  }
];
The column width would be a distance between some points like '2013-10-04 23:00:00' and '2013-10-04 23:23:00'
6

I faced the same problem and I ended up using a filled line chart to simulate the bars:

{
    x: timestamps,
    y: values, // array with either max value or zero; array length is the same as timestamps
    type: 'scatter',
    fill: 'tozeroy',
    fillcolor: '#efca08',
    line: {
        color: '#efca08'
    },
},

See Filled area plots in JavaScript