Column bar chart based on timeline

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?


Hi @Zolotoy , you can control the width of each bar as described here (for python) or here (for javascript). Hope this helps!

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


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

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'

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