Apexchart card does not align correctly to day boundaries

Configuration Frontend
1

I want a hourly energy prices, which is provided for each hour, actually aligns with the boundaries of the day.

type: custom:apexcharts-card
apex_config:
    x:
      show: false
    "y":
      title:
        formatter: |
          EVAL: function (seriesName) {
            return ''
          }
graph_span: 24h
span:
  start: day
now:
  show: true
  label: Now
series:
  - entity: sensor.electricity_price_average_electricity_price_today
    stroke_width: 0
    float_precision: 3
    type: column
    curve: stepline
    opacity: 0.9
    color: ""
    data_generator: |
      return entity.attributes.prices.map((record, index) => {
        return [new Date(record.time).getTime(), record.price - 0.1515];
      });

This is the current input data, to prove it’s aligned with hour boundaries:

Prices today

- time: '2024-10-31 00:00:00+01:00' price: 0.27453 
- time: '2024-10-31 01:00:00+01:00' price: 0.26731 
- time: '2024-10-31 02:00:00+01:00' price: 0.26494 
- time: '2024-10-31 03:00:00+01:00' price: 0.26266 
- time: '2024-10-31 04:00:00+01:00' price: 0.26578 
- time: '2024-10-31 05:00:00+01:00' price: 0.27156 
- time: '2024-10-31 06:00:00+01:00' price: 0.29268 
- time: '2024-10-31 07:00:00+01:00' price: 0.31133 
- time: '2024-10-31 08:00:00+01:00' price: 0.31093 
- time: '2024-10-31 09:00:00+01:00' price: 0.29762 
- time: '2024-10-31 10:00:00+01:00' price: 0.27671 
- time: '2024-10-31 11:00:00+01:00' price: 0.26806 
- time: '2024-10-31 12:00:00+01:00' price: 0.25908 
- time: '2024-10-31 13:00:00+01:00' price: 0.26228 
- time: '2024-10-31 14:00:00+01:00' price: 0.26945 
- time: '2024-10-31 15:00:00+01:00' price: 0.28373 
- time: '2024-10-31 16:00:00+01:00' price: 0.29899 
- time: '2024-10-31 17:00:00+01:00' price: 0.30794 
- time: '2024-10-31 18:00:00+01:00' price: 0.31933 
- time: '2024-10-31 19:00:00+01:00' price: 0.31013 
- time: '2024-10-31 20:00:00+01:00' price: 0.2846 
- time: '2024-10-31 21:00:00+01:00' price: 0.28097 
- time: '2024-10-31 22:00:00+01:00' price: 0.28145 
- time: '2024-10-31 23:00:00+01:00' price: 0.27458

and this is the result:

image

The first column is cut and “Now”, which should be in the beginning of a column, since right now it’s 14:16, is instead placed near the end of the column.

There is maybe a half hour offset, probably because the columns are centered to the hour marks so they appear from hour-30m to hour+30m, even if the values refer to the whole hour span, from hour to hour+59m.

I tried “offset: +/- 30m” but it translates the whole graph and it successfully hides the first half column, but it translates the hour ticks, which still appear in the middle of the hour columns, instead at the left side of the hour columns.

Can it be solved somehow?

Maybe I should offset the “new Date(record.time).getTime()” but I cannot get the syntax to work.

2

I found a way:

return [new Date(record.time).getTime() + 30*60*1000, record.price - 0.1515];

The ticks on the X axis are correct and the columns are centered to the half hour mark, so the numbers are correct too.
The “Now” mark is also correct.

However I get 25 columns!!!

image

3

I tried a trick to solve this one too, but it seems ridiculous to me:

graph_span: 23h
span:
  start: day
  offset: +41m

image