Annotations background appears displaced

[sergioblesa]

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

Describe the bug Annotations, extremas and "now" tags background appears displaced related to the text when the chart type is "column".

Version of the card Version: 2.1.2

To Reproduce This is the configuration I used for both charts, the first one showing the bug while the second works correctly as it is a "line" type:

- type: custom:apexcharts-card
            card_mod:
              style: |
                ha-card {
                  background-color: transparent !important;
                  border-radius: 0px;
                  padding: 0px !important;
                  margin: 0px !important;
                }
            header:
              show: false
              title: Precio
            apex_config:
              plotOptions:
                bar:
                  borderRadius: 5
                  borderRadiusApplication: "around"
              chart:
                height: 120px
                fontFamily: Quicksand
                parentHeightOffset: 20px
              yaxis:
                forceNiceScale: false
                reversed: false
                opposite: true
              annotations:
                xaxis:
                  - x: EVAL:new Date().setMinutes(0, 0, 0)
                    label:
                      text: "Ahora"
                      orientation: 'horizontal'
                      borderWidth: 0
            graph_span: 24h
            update_interval: 60sec
            layout: minimal
            span:
              start: day
            experimental:
              color_threshold: true
            series:
              - entity: sensor.esios_pvpc
                unit: €
                name: Precio
                float_precision: 2
                color: "var(--green)"
                group_by:
                  duration: 1h
                  func: max 
                type: column
                color_threshold:
                - value: -10
                  color: "var(--blue)"
                - value: 0
                  color: "var(--green)"
                - value: 0.05
                  color: "var(--yellow)"
                - value: 0.10
                  color: "var(--orange)"
                - value: 0.15
                  color: "var(--red)"
                - value: 0.20
                  color: "var(--purple)"
                show:
                  extremas: true
                data_generator: |
                  let res = [];
                  let current_hour = new Date().getHours(); 
                  for (const [key, value] of Object.entries(entity.attributes)) {
                      if (key.endsWith("h"))
                      {
                          let hour = key.slice(6,-1);
                          let date = new Date(moment({ "hour":hour, "minute":0 }));
                          res.push([date.getTime(), value]);
                      }      
                  }
                  return res;

          - type: custom:apexcharts-card
            card_mod:
              style: |
                ha-card {
                  background-color: transparent !important;
                  border-radius: 0px;
                  padding: 0px !important;
                  margin: 0px !important;
                }
            header:
              show: false
              title: Consumo
            apex_config:
              plotOptions:
                bar:
                  borderRadius: 5
                  borderRadiusApplication: "around"
              chart:
                height: 120px
                fontFamily: Quicksand
                parentHeightOffset: 20px
              yaxis:
                forceNiceScale: false
                reversed: false
                opposite: true
              annotations:
                xaxis:
                  - x: EVAL:new Date().setMinutes(0, 0, 0)
                    label:
                      text: "Ahora"
                      orientation: 'horizontal'
                      borderWidth: 0
            graph_span: 24h
            update_interval: 60sec
            layout: minimal
            span:
              start: day
            series:
              - entity: sensor.ac_daily_energy_cost
                unit: €
                name: A/C
                float_precision: 2
                color: "var(--blue)"
                group_by:
                  duration: 1h
                  func: max 
                type: line

Screenshots

Expected behavior The text of the labels should appear as in the chart below instead of displaced

Desktop (please complete the following information):

• Browser Edge
• Version 128.0.2739.67

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.