Bar left/right alignment on a time scale

[KlaasBonnema]

I need to create a combo chart with a time X axis. The chart displays various energy readings for consequetive time periods, like every five minutes. Line charts will display the actual power consumption (W) and vertical bar charts the energy consumption for the time period (kWh). The line chart points appear at the exact date/time on the time scale. The bars are however centered on the specified starting date/time so effectively they are shifted by 0.5 time period to the left.

I would like the bars to start at the specified date/time and go until the next specified date/time. So with a 5 minute period a bar that specifies time 07:00:00 should start at 07:00:00 and end at 07:05:00. The bar charts should be able to stack (to show imported electricity with solar electricity on top) and overlay (to show alternate energy such as gas consumption) for the same period.

Preferably there is an option that will tell the bar to align centered on the grid time (as current) or display left or right aligned relative to the grid time.

[kartiks26]

assign to me , i guess i can resolve the issue @KlaasBonnema @SandeepKrSuman

[KlaasBonnema]

@kartiks26, do you expect me to assign this to you? I don't know how to do that. Isn't this something to do for the moderators?

[etimberg]

I think this is a matter of adding a new config option for the alignment (should default to 'center' so that this is not a breaking change) and then change this function https://github.com/chartjs/Chart.js/blob/1199415e257d2feacfb8d50198f32382c2dee0db/src/controllers/controller.bar.js#L566-L593

@kartiks26 if you still want to work on this I can assign it to you

[euoia]

I think I also have this issue.

I would like each bar to represent an interval of 15 minutes. The bar represents a given number of sales in the 15 minute interval. I would like the grid lines to align with the start or end of a bar. Currently, the grid lines are showing in unusual places - on the hour, 22m 30s past the hour, 52m 30s past the hour... and so on:

Maybe there is a way to control how the grid lines are displayed, but so far I haven't found it.

Using chart.js 4.0.1.

[KlaasBonnema]

I have found a workaround by using a stepped line chart. Y-axis is linear, x-axis is time. Add stepped:true and fill:true to the dataset and also a backgroundColor and borderColor. Your data has to specify the height of the bar (y value) at the time (x-value) where the bar starts. You also have to add a datapoint at the end of the data that will "step" the line back to zero (the baseline value.) Forget about rounded corners with this workaround and there will be no divider line between the bars, so there still is a reason for this change request.