V2.1.x series kindof broke y axis grid

[Floppe]

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 I've tested 2.1.0, 2.1.1 and 2.1.2. All versions do not show Y axis grid lines when using 2 axes. Only min and max line is shown.

Screenshots Before upgrade After upgrade

Desktop:

• Browser [Chrome]
• Version [126.0.6478.127 (Official Build) (64-bit)]

[Floppe]

The card yaml

type: custom:config-template-card
variables:
  mytime: new Date().getTime()
entities:
  - sensor.heatpump
card:
  type: custom:apexcharts-card
  header:
    show: true
    title: Geothermal Energy
    show_states: true
    colorize_states: true
  now:
    show: false
    label: Now
  graph_span: 8h
  apex_config:
    chart:
      height: 450px
      zoom:
        enabled: true
      toolbar:
        show: true
        tools:
          zoom: true
          zoomin: true
          zoomout: true
          pan: true
          reset: true
    tooltip:
      fixed:
        enabled: true
        position: bottomLeft
  yaxis:
    - id: energy
      min: ~0
      apex_config:
        opposite: false
        forceNiceScale: true
        decimalsInFloat: 0
        labels:
          show: true
    - id: gear
      decimals: 0
      min: 0
      apex_config:
        tickAmount: 1
        opposite: true
        forceNiceScale: true
        labels:
          show: true
    - id: dumb
      show: false
  series:
    - entity: sensor.compressor_current_gear
      yaxis_id: gear
      name: Gear
      type: line
      curve: stepline
      extend_to: end
      show:
        in_header: true
        legend_value: false
      color: yellow
      opacity: 0.9
      stroke_width: 2
    - entity: sensor.geothermal_sys_kw
      yaxis_id: energy
      name: Energy
      type: line
      extend_to: false
      float_precision: 0
      stroke_width: 2
      opacity: 0.7
      color: '#FF0000'
      show:
        in_header: true
        legend_value: false
      group_by:
        func: avg
        duration: 1m

[RomRider]

I have seen the same happen from time to time but it's an apexcharts.js issue which I can't fix. Try with forceNiceScale: false maybe? Often a refresh on the page fixes the issue (at least for me)

[Floppe]

Thanks. Did not help with forceNiceScale though.

I also noted a another issue in another graph. So I reverted to 2.0.4 for now.

Before if was like this:

Note the y-axis 0 line. And of course the columns width.

[jhemak]

I am also having several different issues with V2.1.x that are not present in 2.0.4. I have worked around most of those problems, however the one I cannot seem to solve is needing to change forceNiceScale to false since the scale is indeed no longer nice. Any openness to rolling this back in the repo and making 2.1.x a beta until these issues can be addressed?

[wejto]

I also found some issues with the y-axis after upgrading from 2.0.4 (the last version not having this different behaviour).

2.0.4

any newer version

Note: the stacking works again even in the newer versions but the yaxis section has to go away at all which I would prefer not to.

The config in my scenario looks like following

yaxis:
  - min: 0
    max: ~15
    decimals: 0
    apex_config:
      tickAmount: 5