Apexcharts-card causing entire web browser to hand due to high resource utilization

[mkanet]

Checklist

• I updated the card to the latest version available
• 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
  Massive resource use #210 <---[Closed with no solution]

Describe the bug
When I make apexcharts-cards using my HA sensors, it causes the entire web browser to become unresponsive; even on a relatively fast PC with lots of free resources.

NOTE: This issue doesn't happen with other graph cards such as history-graph, etc.

Things I already tried
-Disabled web browser extensions/addons; including ad-blocking
-Changed update_interval to >1 minute
-Tried different web browsers on PC

Version of the card
Version: 2.0.4

To Reproduce
This is the configuration I used:

type: custom:apexcharts-card
graph_span: 1d
update_delay: 5s
update_interval: 1min
header:
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
all_series_config:
  stroke_width: 2
series:
  - entity: sensor.total_cpu_usage
  - entity: sensor.cpu_package_temperature
    type: column

Screenshots

NOTE: Screenshot has a couple of extensions enabled. However, disabling all of them still has the same result.

Expected behavior
Resource utilization should be comparable to other graph cards like history-graph, etc using the same sensors.

Desktop (please complete the following information):

• Browser [Chrome, MS Edge]
• Version [latest]

[uaaauaaa]

same problem,+ incredible freezes while editing dashboard with apexcharts

[mkanet]

I'm beginning to think this card was never meant to be used by sensors that update relatively frequently; regardless of specified update interval in the card. My sensors update once every 6 seconds... which is completely fine for all other HA graph cards; just not Apexcharts-card. What a shame.

[uaaauaaa]

I'm beginning to think this card was never meant to be used by sensors that update relatively frequently; regardless of specified update interval in the card. My sensors update once every 6 seconds... which is completely fine for all other HA graph cards; just not Apexcharts-card. What a shame.

I set the refresh rate to 30 s per sensor, but this did not give the desired result, I even reduced the number of sensors with data to 10 per page, this also did not help. Until I have no other options

[AleXSR700]

Are you sure the other chart graphs are not simply using statistics instead of raw data? Can you see a data point every x sec on the other cards?
You can enable statistics in the apex-charts card manually.

[mkanet]

I don't think other graphs use statistics; at least not by default. For example, sensors that display in other graphs show significantly much MUCH more detail in the graph when these sensors update every 6 seconds; as opposed to every 5 minutes. ApexCharts statistics can't show any more detail than every 5minute.

[uaaauaaa]

Are you sure the other chart graphs are not simply using statistics instead of raw data? Can you see a data point every x sec on the other cards? You can enable statistics in the apex-charts card manually.

yes, simple graph cards work without any freezes, but their visualization is not enough for me, it is worse than apex. I also understand that this is a bug, since my macbook pro freezes for a minute or two when (editing page) working with apex and starts to make a lot of noise. To temporarily transfer the apex to a simple graph card, I had to use a powerful PC on Windows))) it's funny to talk about it, but these are features, apparently, of a home assistant in such situations

[uaaauaaa]

I will add that all sensors leading to freezing work through esphom and through esp32: mhz19, pmsx003, sgp30, bme280, etc

but there are aqara sensors that work on gw2 in apex work without friezes

[AleXSR700]

Okay, good to know. I was just checking because I too am using apexcharts-card for my visualization and think that it freezes the system.
As soon as amount of data increases, the application (companion app or browser) displaying the card becomes extremely slow.
But it seems to be an issue on the displaying system, not the server.

It reminds me of applications that work with uncompressed data. They decompress the input data, hence need a lot of memory, whereas other programs work with the compressed input data and hence need less memory. So the latter is much faster.

No idea what causes apexcharts-card to slow down the displaying system. Because if you force close the browser or companion app and reopen it, the system is fast again until you try to view the chart again.

[mkanet]

Just a note... this issue was open for nearly 2.5 years. Unfortunately, @RomRider wasn't able to reproduce this issue that everyone else was having on his Home Assistant setup. He offered some general tips (below) which may help a little to reduce the load. However, those tips didn't help me resolve the actual issue (presuming it's related to how ApexCharts interacts with Home Assistant's "frontend", Lovelace). Maybe when @RomRider has time, he could open an issue here: https://github.com/home-assistant/frontend?

#210 (comment)

• use the last version (and make sure it's not using and old cached version).
• use update_interval (it's now fixed).
• use group_by to reduce the number of data points displayed
• don't try to display 10th of thousand of datapoints on a chart (eg: a sensor updating every 5 sec displayed over 2 days is 35000 datapoints unless you use group_by)
• make sure there are no other custom cards interfering

[github-actions]

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.

[github-actions]

This issue was closed because it has been stalled for 10 days with no activity.

[RobertoCravallo]

uaaauaaa comment is EXACTLY what happens on my system....

[RomRider]

Might want to try the latest beta version, I have seen some performance improvements as it's now using the latest apexcharts.js library