Second y-axis stops auto-scale from working (y-axis scale always starts with 0)

[chah90]

Checklist

• I updated the card to the latest version available => tested with 1.9.0-dev.1
• I cleared the cache of my browser
• I verified that I'm really running the lastest version in my browser console
• I checked if there is another issue opened with the same problem

Describe the bug
As soon as I add a second y-axis, both y-axis are starting with 0. I already tested 1.9.0-dev.1 and specified a min function (see my configuration) but this doesn't work neither.

Version of the card
Version: 1.8.2 and 1.9.0-dev.1

To Reproduce
This is the configuration I used:

type: 'custom:apexcharts-card'
apex_config:
  yaxis:
    - title:
        text: Axis 1
      min: |
        EVAL:function(min) {
          return min;
        }
    - title:
        text: Axis 2
      opposite: true
      min: |
        EVAL:function(min) {
          return min;
        }
series:
  - entity: sensor.Schlafzimmer_Temperatur
    name: Temperature
  - entity: sensor.Schlafzimmer_Humidity
    name: Humidity

Screenshots
Appearance when using one y-axis (just removed the second axis from the configuration above):

The axis starts at ~ 19.

When using the configuration from above with two y-axis, both y-axis starts at 0:

Expected behavior
The min values of the y-axis are dynamically identified (either per default or per function as above) just as it is determined if only one y-axis is defined.

Desktop (please complete the following information):

• Firefox 88.0.1
• Safari 14.1
• macOS 11.3.1

Smartphone (please complete the following information):

• Device: Phone 12 Pro
• OS: iOS 14.5.1
• stock Safari browser

Additional context

[RomRider]

That's the behavior of the library I use, not much I can do about it. You need to hard-code the values if you want something different unfortunately :(

[chah90]

Too bad 😞 I managed to get the desired behavior in a fiddle (although not with the default config but with defining the min function as above). That’s why I hoped that this is a bug in the card library.

Would the fiddle help or are you sure that this is a library issue?

[RomRider]

Sure, share it, I'll have a look. Make sure you are using the same apexcharts.js version as this card is using (3.23.1) as I can't upgrade because of a bug which breaks this card: apexcharts/apexcharts.js#2388

(I just checked and the min function returns 0 in the case above, so I don't know how you managed to make it work :) see: https://codepen.io/RomRider/pen/yLMMerm )

[chah90]

I couldn't manage this now, neither 😄 at least with plain javascript and the latest apex charts version.
But previously I just edited an existing example based on Angular and there it's working:
https://codesandbox.io/s/apx-line-data-labels-forked-41yht?file=/src/app/app.component.ts

It uses apexcharts in an older version (3.15.0) and updating it to the version used in the card I can reproduce the bug. So it's a library issue as you already stated.

Update: The last "working" version of Apexcharts is 3.22.0. I downgraded the card dependency locally for testing. But it doesn't work as intended as well because the min value provided to the function is the min value of both series, they are not independent:

[RomRider]

I think I can hack something to make it work, but it's going to be super ugly... I'll try and report back.

Maybe I should introduce an auto-min feature of some sort...

[chah90]

This would be awesome 😊

[RomRider]

👀 #160

[github-actions]

🎉 This issue has been resolved in version 1.9.0-dev.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[chah90]

I tried the new version, but the axis still start at 0. Did I miss an important line in the configuration?

type: 'custom:apexcharts-card'
header:
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
series:
  - entity: sensor.Badezimmer_Temperatur
    name: Temperature
    yaxis_id: temperature
  - entity: sensor.Badezimmer_Humidity
    name: Humidity
    yaxis_id: humidity
yaxis:
  - id: temperature
  - id: humidity
    opposite: true