Apexchart multiple yaxis -> autoscale doesn´t work

Configuration Frontend
1

Hi all,

i´m wondering why the chart is not behaving as intended (at least as i think it should)
There are 3 different units / y-axis: temp, rel. humidity and absol. humidity. Some have 2 or 3 entities assigned, some only one.

For absolute humidity, autoscale doesen´t work when all entities are selected. Once the relative humidity is entity unselected, autoscale works for the absolute humidity … See the 2 screenshots.
Another strange fact is, that both absolute humidity chart lines do not fit to the y-axias values when all entities are selected.

For the Taupunk (temp), autoscale only works if only temperature entities are selected…

If absolute humidity and Taupunkt are selected only the relative humidity y-axis shows up which is abolutely strange…

Any ideas? Thank you!!!

Apex card 2 values
Apex card 2 values1548×713 52.3 KB

Apex card unselected
Apex card unselected1538×618 90.1 KB

Apex card
Apex card1541×622 72.5 KB

type: custom:apexcharts-card
header:
  show: true
  title: Kellerklima – Innen vs. Außen
graph_span: 48h
update_interval: 10min
now:
  show: true
  label: Jetzt
  color: grey
series:
  - entity: sensor.lumi_lumi_weather_b89fdf07_temperature
    name: Temp. Keller
    yaxis_id: temp
  - entity: sensor.lumi_lumi_weather_07a5e007_temperature
    name: Temp. Außen
    yaxis_id: temp
  - entity: sensor.taupunkt_innen
    name: Taupunkt Keller
    yaxis_id: temp
    stroke_dash: 4
  - entity: sensor.absolute_feuchtigkeit_innen
    name: Abs. Feuchte Innen
    yaxis_id: abs
  - entity: sensor.absolute_feuchtigkeit_aussen
    name: Abs. Feuchte Außen
    yaxis_id: abs
  - entity: sensor.keller_rel_lf
    name: Rel. Feuchte Keller
    yaxis_id: hum
    stroke_dash: 2
apex_config:
  chart:
    height: 450
    toolbar:
      show: true
  legend:
    show: true
    position: top
  tooltip:
    shared: true
    intersect: false
  yaxis:
    - yaxis_id: temp
      opposite: false
      title:
        text: Temperatur (°C)
      decimalsInFloat: 1
    - yaxis_id: abs
      opposite: true
      title:
        text: Absolute Feuchte (g/m³)
      decimalsInFloat: 1
    - yaxis_id: hum
      opposite: true
      title:
        text: Relative Feuchte (%)
      decimalsInFloat: 0
  xaxis:
    type: datetime
2

Sure it does, if you would have configured it with all it’s available options as mentioned in the documentation.

Just to name a few issues.

remove the xaxis: and it’s type: datetime

yaxis: defnitions are topmostlevel not something belonging to apex_config

and defining the differnt axis works by “yaxis:” followed by “- id: <name>” not “yaxis_id: <name>”

just to name a few.

You should have noticed that there’s not just an issue with scaling but also that the wrong yaxis get displayed for some series. Means if you only select 1 or the other temp entity you get a humidity axis shown but no temp axis. This is good indicator something went completely wrong.

1 Like
3

Thank you very much - that helped a lot!! Even though I looked for hours into it I couldn’t spot the obvious issues :sweat_smile:. I hope I caught em all.
At least it seems so. I got it running :grinning:.

Two questions I still couldn’t solve are: For mobile landscape view I‘d like to see more of the chart. It should be a bit wider.
And it would be of benefit to have the yaxis units on top of the values or inline, not beside it. Is that possible?

IMG_1722
IMG_17222532×1170 209 KB


type: custom:apexcharts-card
graph_span: 48h
header:
  show: true
  title: Kellerklima – Innen vs. Außen
apex_config:
  legend:
    show: true
    position: right
yaxis:
  - id: temp
    opposite: false
    apex_config:
      title:
        text: °C
  - id: abs
    opposite: true
    apex_config:
      title:
        text: g/m3
        rotate: 90
  - id: hum
    opposite: true
    decimals: 0
    apex_config:
      title:
        text: "%"
        rotate: 90
series:
  - entity: sensor.lumi_lumi_weather_b89fdf07_temperature
    name: Temp. Keller
    yaxis_id: temp
  - entity: sensor.lumi_lumi_weather_07a5e007_temperature
    name: Temp. Außen
    yaxis_id: temp
  - entity: sensor.taupunkt_innen
    name: Taupunkt Keller
    yaxis_id: temp
    stroke_dash: 4
  - entity: sensor.absolute_feuchtigkeit_innen
    name: Abs. Feuchte Innen
    yaxis_id: abs
  - entity: sensor.absolute_feuchtigkeit_aussen
    name: Abs. Feuchte Außen
    yaxis_id: abs
  - entity: sensor.lumi_lumi_weather_b89fdf07_humidity
    name: Rel. Feuchte Keller
    yaxis_id: hum
    stroke_dash: 6
4

You were given the link to the documentation. The idea wasn’t you bookmark that and be done, but you should at least scroll it up and down for the sake to find something interesting.

“section view” is a head which might help you with your landscape issue.
For the yaxis inside I can’t think of a solution. I even can’t think of a card_mod example where someone tried to archive that, but I don’t think it’s an inbuild feature.

1 Like
5

For sure that’s what I did :wink: I wasn’t able to transfer it into a working code.
Maybe I’ll give it another try the next days.

Thanks for your support/hint.