ApexChart problem after update (I guess!?)

Configuration Frontend
1

Here I had for a long time very nice chart for all my temperatures in the house, which worked flawlesly until recently when those without “humidity” part just stopped drawing chart and just show current temperature. Not sure how its happen, just saw at some moment after (I think) some HA Core update.
I am running HAOS on the Intel NUC on bare metal, always updated to the latest everything as it is at the moment like that.
Some of the devices that I use for the temperature monitoring does not have humidity sensor inside, and there I just removed that part from the chart and it was just fine until it was not recently. If I add that lines from some other sensor, everything is back in normal for that chart.

Here you can see how it look:

12.10.2024_11.13.17_REC
12.10.2024_11.13.17_REC3157×1379 258 KB

Here is the complete code that work just fine with both temperature and humidity:

type: custom:apexcharts-card
header:
  title: NVIDIA SHIELD KUPATILO
  show: true
  show_states: true
  colorize_states: true
update_interval: 60min
graph_span: 1d
apex_config:
  tooltip:
    enabled: true
  yaxis:
    - show: true
      decimalsInFloat: 0
      labels:
        style:
          colors: "#FFB62E"
          fontSize: 12px
          fontWeight: bold
          fontFamily: Raleway
      forceNiceScale: true
    - show: true
      decimalsInFloat: 0
      opposite: true
      labels:
        style:
          colors: "#2eb9ff"
          fontSize: 12px
          fontWeight: bold
          fontFamily: Raleway
      forceNiceScale: true
  xaxis:
    axisBorder:
      show: false
    labels:
      style:
        fontSize: 14px
        fontFamily: Raleway
  chart:
    height: 190
  grid:
    show: true
  legend:
    fontSize: 12px
    fontFamily: Raleway
    height: 40
  dataLabels:
    enabled: false
  stroke:
    width: 3
    curve: smooth
  fill:
    type: gradient
    gradient:
      type: vertical
      shadeIntensity: 0.8
      inverseColors: false
      opacityFrom: 0.5
      opacityTo: 0
      stops:
        - - 0
          - 50
          - 100
series:
  - entity: sensor.nvidia_shield_kupatilo_temperature
    name: Temperatura
    show:
      extremas: true
    type: area
    color: "#FFB62E"
    fill_raw: last
    float_precision: 0
    group_by:
      duration: 60min
      func: avg
  - entity: sensor.nvidia_shield_kupatilo_humidity
    name: Vlažnost
    type: area
    color: "#2eb9ff"
    fill_raw: last
    float_precision: 0
    group_by:
      duration: 60min
      func: avg

And here is complete code from the problematic one:

type: custom:apexcharts-card
header:
  title: PODRUM HODNIK
  show: true
  show_states: true
  colorize_states: true
update_interval: 60min
graph_span: 1d
apex_config:
  tooltip:
    enabled: true
  yaxis:
    - show: true
      decimalsInFloat: 0
      labels:
        style:
          colors: "#FFB62E"
          fontSize: 12px
          fontWeight: bold
          fontFamily: Raleway
      forceNiceScale: true
    - show: true
      decimalsInFloat: 0
      opposite: true
      labels:
        style:
          colors: "#2eb9ff"
          fontSize: 12px
          fontWeight: bold
          fontFamily: Raleway
      forceNiceScale: true
  xaxis:
    axisBorder:
      show: false
    labels:
      style:
        fontSize: 14px
        fontFamily: Raleway
  chart:
    height: 190
  grid:
    show: true
  legend:
    fontSize: 12px
    fontFamily: Raleway
    height: 40
  dataLabels:
    enabled: false
  stroke:
    width: 3
    curve: smooth
  fill:
    type: gradient
    gradient:
      type: vertical
      shadeIntensity: 0.8
      inverseColors: false
      opacityFrom: 0.5
      opacityTo: 0
      stops:
        - - 0
          - 50
          - 100
series:
  - entity: sensor.0x00158d0004500d24_device_temperature
    name: Temperatura
    show:
      extremas: true
    type: area
    color: "#FFB62E"
    fill_raw: last
    float_precision: 0
    group_by:
      duration: 60min
      func: avg

I am not into coding at all and apologize if this is something trivial, I am just not capable of find a problem when it comes to it. Appreciate any help.

2

My ApexChart cards are still working fine after latest update. Have you cleared the browser cache?

3

No unfortunately, I’ve seen an update and gave it a try (cleared the browser cache as well) in hope that it will eventually fix it and because it doesn’t I decided to ask people here.
Guess something is changed in apex syntax that caused this, I don’t know really.
Thank you for response.

4

Why is this here? When you only have one data series, not two? Remove the second y-axis entry.

1 Like
5

Aaahhh I see, thank you, this solved the problem.
As I said, I am not into coding at all and I just removed at the beginning the part that worked for me by the system “try and error”, and it worked just fine. Did not dive into the programming syntax etc, because I am not capable for it.
Confusing part was that it worked and suddenly not, so I assumed that problem is update, which actually strengthen the syntax and therefore found the problem that is caused by me actually.
Thank you very much for help!

6

Probably not exactly an update - ApexCharts hasn’t updated since July. More likely there was something in cache and a HA update changed things on the web page enough to force an browser to reload resources…

1 Like