Apexchart card does not align correctly to day/hour boundaries

[dewi-ny-je]

Checklist

• [x] I updated the card to the latest version available
• [x] I cleared the cache of my browser
• [x] I verified that I'm really running the lastest version in my browser console
• [x] I checked if there is another issue opened with the same problem

Version of the card "installed_version: v2.1.2"

Desktop (please complete the following information):

• Browser Chrome
• Version 130

Smartphone (please complete the following information):

• Device: Galaxy A52s 5G
• OS: Android 14
• Browser Chrome or native app

Describe the bug I use "column" visualisation.

Even if I use

graph_span: 24h
span:
  start: day

the columns are not aligned to day boundaries.

This is the configuration I used:

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];
      });

The input data

sensor.electricity_price_average_electricity_price_today.prices

- 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

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.

If I use 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!!!

Then I tried

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

and I got apparently what I needed:

however it's not reliable, sometimes I still get half of the 25th columns, and the graph for the following day, identical settings except for offset: +1d+41m starts with half column.

Something seems to be wrong in the card.

[dewi-ny-je]

I made a different test:

graph_span: 1d
span:
  start: day
  offset: +30m
series:
  - entity: sensor.electricity_price_average_electricity_price_today
    data_generator: |
      return entity.attributes.prices.map((record, index) => {
        return [new Date(record.time).getTime(), record.price - 0.1515];
      });
    group_by:
      duration: 1h
      func: max

I get a graph which looks ok

but I had to use a "offset: +30m", while the docs clearly write that

Span enables you to:

Offset the graph by an amount of time start: Display the graph from the begining of the minute, day, hour, week, month, year. In this case, graph_span should be in most cases <= to 1 unit of the unit defined in start. ... Combined with group_by in a serie, the group will begin at the tick of the start unit (+/- offset if defined)

[Harry-1976]

I somewhat corrected it with a time delta, like:

series:
  - entity: sensor.your sensor
    time_delta: +30m

[dewi-ny-je]

I somewhat corrected it with a time delta, like:

series:
  - entity: sensor.your sensor
    time_delta: +30m

@Harry-1976 what's the difference compared to using an offset as I did? Your solution seems to make the numbering start at 0:00, the offset at 1:00, but the final looks is better in the latter case, in yours the white space on the left is larger and the one on the right after the last column seems to small.

[dewi-ny-je]

Anyway the use of group_by solved my issue, but the initial issue remains: "span: 1d" shows more than one day of data.

[Harry-1976]

I somewhat corrected it with a time delta, like:

series:
  - entity: sensor.your sensor
    time_delta: +30m

@Harry-1976 what's the difference compared to using an offset as I did? Your solution seems to make the numbering start at 0:00, the offset at 1:00, but the final looks is better in the latter case, in yours the white space on the left is larger and the one on the right after the last column seems to small.

Hi @dewi-ny-je , you are right that the graph in your case looks better than mine and it bothers me. I have created 2 cards. The left card is with my solution, the right card with yours. In my card the color of the price in the header matches the color in the graph at the 'now' time line and it is showing the correct price per hour. In the right card these do not align or correspond. The columns show the wrong price per hour. I found that a bigger issue than a worse looking chart.

Anyway, there's two solutions now that really aren't solutions. There's one issue or another. The columns also start just below the x-axis.

[Harry-1976]

Also, see #1688