y-axis labels not lining with graph columns

[davoau]

Checklist

Version of the card
"installed_version: v2.1.2"

Desktop (please complete the following information):

Browser:
Chrome
Version 131.0.6778.265 (Official Build) (64-bit)

Description

I am hiving an issue with y-axis labels not showing correctly - years labels are out.

The data is stored in an influx database.

Below is the data from influx for hotwater usage per year.

2021-12-31T23:59:59+10:00 year 277.96
2022-12-31T23:59:59+10:00 year 493.5
2023-12-31T23:59:59+10:00 year 598.34
2024-12-31T23:59:59+10:00 year 760.15
2025-12-31T23:59:59+10:00 year 33.17

Epoch time:

1640959199000000000 year 277.96
1672495199000000000 year 493.5
1704031199000000000 year 598.34
1735653599000000000 year 760.15
1767189599000000000 year 33.17

Code for card:

type: custom:apexcharts-card
header:
  show: true
  title: Hotwater Power Usage - Yearly
  show_states: false
  colorize_states: true
apex_config:
  chart:
    height: 440
    extend_to: now
  xaxis:
    type: datetime
    labels:
      show: true
      rotate: 0
  yaxis:
    min: 0
    forceNiceScale: true
  stroke:
    show: true
    width: 1
  legend:
    show: true
graph_span: 10year
span:
  end: year
series:
  - entity: sensor.influxdb_read
    type: column
    float_precision: 2
    name: Yearly Usage kW
    group_by:
      func: raw
    color: '#acd373'
    transform: return x / 1024;
    data_generator: |
      var params = new URLSearchParams({
          db: "sensors",
          q: "SELECT \"value\" FROM \"hotwater\" WHERE \"entity_id\" = 'year'"
          });

      var myInit = { method: 'GET',
                      headers: {
                          'Accept': 'application/json',
                      },
                      mode: 'cors',
                      cache: 'default' 
      };

      const request = async () => {
          var result = [];
          const response = await fetch('http://pi5:8086/query?' + params, myInit)
          const json = await response.json();
          if (json["results"] && json["results"][0] && json["results"][0]["series"]  && json["results"][0]["series"][0] && json["results"][0]["series"][0]["values"]) {
              for(var val of json["results"][0]["series"][0]["values"]) {
                  result.push([new Date(val[0]), val[1]]);
              }
          } 
          return result;
      }
      return request();
update_interval: 5m

Which produces the below chart, however the dates on Y-Axis are wrong. 2026 has 2025 data on it. The data is correct.

If I change group_by to:

group_by:
      func: last
      duration: 1year

The labels on Y-Axis are correct, however some of the data is wrong. Eg: 2024 should be 760.15kw but shows 598.34kW which is what 2023 is. It also shows 598.34kW for 2023, which is correct. The time is also wrong, They should all be 31 of dec and 23:59:59.

If I offset by at least +150d the y axis labels now line up, however it now has wrong date when cursor is over the column as shown in below screen capture:

offset by at +180d shows what I want, just need to fix date when hovering over column.

Is there something I can do to fix this or is it a bugs ?

Maybe it is a similar problem to this ?
https://github.com/RomRider/apexcharts-card/issues/811#issue-2643499651

Thanks