bar chart with widths based on time range

[niranjansooda]

I am trying to find whether it would be possible to draw a bar chart like attached in the image based on time range.

Let us suppose the x axis have all the week days.let us suppose monday is divided into 24 hours.

based on the image taking first bar let us say i got an event from monday 6pm to tuesday 4AM the bar should cover that area along x axis like shown in the image.

then again from tuesday 11AM to 3PM another event occured it should cover that particular area. and it should draw bars based on time ranges.

so the bar should have width based on different time ranges.

can some one help if it is possible to do above case in chart.js .I recently started with chart.js and don't know whether above functionality it supports.

[benmccann]

I think you should be able to. You'd want to use barThickness: flex, distribution: linear. See the example in the bottom right in the description of #4994

[niranjansooda]

hi @benmccann

i tried looking into above description but the data takes only array of starting points and the width adjusts itself using flex.

i want each each bar to take both starting point { x1 : jun 2nd 11AM ,y1 :100% } and ending point { x2: jun 3rd 2AM, y2 :100%} and the the bar should fill the color between these two points along x axis.

and then again take another two points {x1:jun 3rd 6PM, y1 :100%} and ending point { x2: jun 4rd 1AM, y2 :100%} and the bar should fill the color between these two points. and should continue like this.

can you please look at the above photo to get more clarity on my requirement and confirm whether it is possible? i attached the stack blitz link i tried using your suggestion.

https://stackblitz.com/edit/charting123

[benmccann]

We just added support for having different y1 and y2 starting and ending points: #6056

It's not supported for x though. You'd have to build your own custom controller for that