Bar chart widths equal to date periods

plotly.js
1

I’m trying to show average energy use in different periods using a bar chart.

Assuming I have data:

2022-01-01 - 1000
2022-01-20 - 1400
2022-02-05 - 2000
2022-02-28 - 2500
2022-03-15 - 2900

I want to be able to show 4 bars:

  1. of height 400, with width spanning from Jan 1st to Jan 20th
  2. of height 600, with width spanning from Jan 20th to Feb 5th
  3. of height 500, with width spanning from Feb 5th to Feb 28th
  4. of height 400, with width spanning from Feb 28th to Mar 15th

Bar heights are obviously not a problem, but I’m having had time getting bars to their widths and positions. I know I can use x and width properies of data points, but bars are centered on given date rather than spanning between dates and I’m not sure how to calculate correct width.

2

Hi @burtek, I would use offset rather than X for the positioning. Both offset and width should be a number value in milliseconds when dealing with a date x-axis. See how I leveraged that in this post: https://community.plotly.com/t/grouped-stacked-bar-chart/60805

1 Like
3

Thank you! Will try to do it this way

EDIT: worked like a charm and much cleaner solution, thank you! Also thanks for pointing out those values are in milisecs