Massive resource use

[tomlut]

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

Describe the bug
I've been quite impressed with the look and function of apexcharts and was going to replace all my mini graph cards but I have found that apexcharts is far too resource intensive to meet my needs.

For example, the bar charts in the screenshot below are daily maximums or last values for the past week. There could be thousands of measurements a day from the inverter that need to be processed.

When loading, the charts grind not only the frontend to a halt but the backend too. I get loads of errors that unrelated integrations are taking too long to respond.

This is with Home Assistant on an i7 mini PC.

I tried setting the graph update to 5 minutes rather than on sensor change. This helped a bit. Except when trying to edit the cards. If the card is still loading data when I try to save it seems to start loading and processing the data again, without cancelling the previous load/process operation. Leading to massive resource use. Closing the page does not help. All the processes continue to run to completion. This pretty much prevents Home Assistant from doing anything else.

I've tried removing the "experimental" colour thresholds. The massive resource use continues to occur.

The mini-graph card (for all it's other failings) does not do this. I have no idea how or why. Caching perhaps?

Version of the card
Version: v1.9.0

To Reproduce
This is the configuration I used:

type: custom:apexcharts-card
apex_config:
  dataLabels:
    background:
      enabled: false
    style:
      colors:
        - var(--primary-text-color)
graph_span: 7d
header:
  show: true
  title: Daily Energy
series:
  - entity: sensor.energy_inverter_daily
    type: column
    show:
      datalabels: true
    group_by:
      func: max
      duration: 1d

Screenshots
If applicable, add screenshots to help explain your problem.

Expected behavior
A bit of optimisation, particularly when editing the card so that it does not bog down the entire system.

Desktop (please complete the following information):

• Browser Firefox
• Version 91.0.2

Smartphone (please complete the following information):

• Device: [e.g. iPhoneX]
• OS: 14.8
• Browser saffari
• Version ??

Additional context
Add any other context about the problem here.

[RomRider]

Caching is disabled while editing the card from the frontend, that's on purpose. Maybe there are some bugs there and I could make it better but I don't use the frontend editor so I never really checked.

With regards to the backend being slow, unfortunately that has nothing to do with the card but to requesting history data (almost exact same code as mini-graph-card). I have an i7 NUC to run home-assistant and I don't experience what you are seeing (and I also load a lot of history data). Once the card is configured, you shouldn't have any issue anymore as caching is enabled again automatically.

With regards to the frontend being slow, all the math is done in frontend but I do not experience that either (neither does a lot of other people using the card). If you hace a slow device for your frontend through, that is quite expected (eg: slow Android tablet, old iPad or equivalent)

[tomlut]

(almost exact same code as mini-graph-card).

That's weird because I don't see the same behaviour with the mini-graph card. I can interrupt it loading to my hearts content when editing via the UI.

Once the card is configured, you shouldn't have any issue anymore as caching is enabled again automatically.

As I said, it's better, but if you interrupt the loading/processing it begins again without (apparently) stopping the previous processes. And that's what gets heavy. It starts trying to load all this data 2 or 3 time in parallel.

If you hace a slow device for your frontend through,

No, it's an older but still quite powerful PC.

[vadipp]

I have found that the graphs were logging lots of errors in the browser console.
Seems like this was causing slow loading of the graphs for me.
Disabling adblock for the site removed the errors and improved the performance noticeably.

[vadipp]

Sorry, it turns out that the errors in the console are just transient. Disabling adblock didn't affect them. The errors just disappeared, and then magically reappeared again. Seems like I'm actually facing bug #17.

[RomRider]

@vadipp, you can ignore the errors in the console as those are related to some bugs in apexcharts.js but are not affecting functionalities.

That's weird because I don't see the same behaviour with the mini-graph card. I can interrupt it loading to my hearts content when editing via the UI.

I don't understand what you mean?
If there is a bug with editing the card in the UI (like having ghost instances of the card still running), it should go away once you close the editor and reload the page.

[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.

[tomlut]

Still an issue on 2021.11.1

[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.

[tomlut]

Still an issue on 2021.12.7

[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.

[tomlut]

Still an issue on 2022.2.0

[Hamsterman]

I have an interface with two graphs - its super slow. I wish it would generate the graph serverside as an image so it would be super fast for the client!

[sicknesz]

Using last version,
I thinks there's some memory leaks with the card, even with only 2 sensors as inputs, massive CPU/RAM usage, as soon as the card is removed memory goes back to normal usage, and it's even worse when editing (most likely due to cache being disable as you mentionned)1

[RomRider]

There might be some issues with edit, yes and I need to have a look at it. however outside of editing the card, the card is resource heavy especially if you have to display A LOT of datapoints (like using a sensor updated every minute or less with raw data over a long period of time).

[Hamsterman]

There might be some issues with edit, yes and I need to have a look at it. however outside of editing the card, the card is resource heavy especially if you have to display A LOT of datapoints (like using a sensor updated every minute or less with raw data over a long period of time).

I have a sensor with lots of datapoints - what can you recommend me do instead.
Also I have the same data in a SQL database.

[jazzmonger]

I thought I was losing my mind... I've chased this for almost a month and finally realized that Apex charts IS THE CULPRIT. it started a few core updates ago, basically the charts are so slow as to render them totally unusable. The Ui freezes completely for anywhere from 10-30 seconds, only on Lovelace tabs that have the charts.

Bummer. It was a nice card. Anyone found a substitute card?
Fwiw, I'm on core-2022.3.7 now, but it's been going on for weeks.
Jeff

[tomlut]

The mini graph card seems to handle large data sets better. The graphs aren't as customisable or nice though.

[zanna-37]

I thought I was losing my mind... I've chased this for almost a month and finally realized that Apex charts IS THE CULPRIT. it started a few core updates ago, basically the charts are so slow as to render them totally unusable. The Ui freezes completely for anywhere from 10-30 seconds, only on Lovelace tabs that have the charts.

Bummer. It was a nice card. Anyone found a substitute card? Fwiw, I'm on core-2022.3.7 now, but it's been going on for weeks. Jeff

@jazzmonger, I'm experiencing the same (UI freezes for many seconds and I can't even switch tab in the dashboard until the graph is loaded) and I'm moving toward Plotly. It seems a younger project but it's very powerful, lighting fast, and you can also interact with the graph.
It is not a direct drop-in replacement, but I'm moving to it. The worst issue for me is dbuezas/lovelace-plotly-graph-card#34. But considering the drawbacks of apex, it's nothing.

[RomRider]

Apex charts IS THE CULPRIT

I have a dashboard with 100 charts displayed at once and it's working fine. Just saying there's an issue without providing any data/performance graph isn't going to help with fixing a potential issue.

[tomlut]

Yeah but how many data points do each of your graphs use and what features of Apexcharts are you using?

There is definitely an issue using multiple graphs when using sensors that can update every second or so (like from my solar inverter).

[zanna-37]

Yeah but how many data points do each of your graphs use and what features of Apexcharts are you using?

There is definitely an issue using multiple graphs when using sensors that can update every second or so (like from my solar inverter).

Yeah, me too. I'm visualizing 10h of data with 8/9 traces that update every minute.

[RomRider]

Use update_interval and maybe an aggregate (eg: avg) function over that then to reduce the sample rate to 1min, updating every second is way too high.
Every seconds over 10h is 36000 data points, not surprising it is quite slow...

[tomlut]

I wasn't aware of the update interval. I'll give it a go. Yeah I didn't write the SMA Integration that does that.

[convicte]

Example of a failure to load, but there are many other ways it fails:

Without pressing F5 to refresh, the page would remain like this.
The next time over, it would keep spinning the loading wheels for 30-40 seconds before slowly populating the card.

[mcfly2283]

I have the sam Issue. I Cant use the card with my Android-Wallpannel anymore, due to freezing the UI completely for about 5 Seconds while the Card is reloading. On an i7 it`s take about 2 Seconds.

There are only 2 Sensors without many Data-Points.

  - type: custom:apexcharts-card
    graph_span: 24h
    experimental:
      disable_config_validation: true
    all_series_config:
      stroke_width: 2
      fill_raw: last
    header:
      show: false
      show_states: false
      colorize_states: true
    series:
      - entity: sensor.0x158d00044d1e69_humidity
        name: Haus
        type: area
        show:
          in_header: false
          legend_value: true
      - entity: sensor.delta_forecast_erdgeschoss
        name: Forecast
        show:
          in_header: false
          legend_value: true
        unit: '%'
        type: line

[philsson]

I second this bug causing both backend and frontend to freeze.

[alphasixtyfive]

I can confirm having same issue.

[convicte]

Well unfortunately @RomRider gave his opinion on it, which doesn't match our experience, but unless I am mistaken, decided not to work on it any further.

The depressing part is it was MUCH faster before the update listed above, but then it went downhill from there.

It's been a few months with no action on it, so we have to take the good with the bad!
The graphs are brilliant and fit my use cases very well, but I am in the process of switching to https://github.com/alexarch21/history-explorer-card and https://github.com/dbuezas/lovelace-plotly-graph-card, since I can't have things slowing down and crushing all the time.

These two are not as nice (or at least don't work as nice for my use cases), but for the same data provide instantaneous performance improvement, further accentuating it's not the data that is the problem.

Again, it's a free project that someone invests their own time into, so I can only say thank you @RomRider for what it is now and look elsewhere for what I need.

[mortenalbring]

I expect it probably is a very difficult one to reproduce, and may be due to various different things for different people, different sensor states. It also be due to the ApexChartsJs library itself, which is entirely outside of @RomRider's control.
I was hopeful that the console logs I noticed in a previous comment would be useful, as I am getting 'NaN' errors from ApexCharts and there may just be a simple null check required.. somewhere..

#210 (comment)

Oh, just noticed there is an entirely separate ticket and discussion for this:
#17

That said, @RomRider's suggestion of adding group_by to every single chart resolved the console logs for me and massively improved performance. If you haven't already tried that, it'll probably help. I am also using plotly on a different dashboard, and it is great for displaying huge amounts of data, but it's nowhere near as nice and polished as ApexCharts.

[convicte]

Thanks for the prompt comment. I agree with mostly all of what you said.

1. Plotly vs. APEX - agreed, APEX is way more polished
2. I am mostly using group_by - please see Massive resource use #210 (comment) - and it makes a big difference but after having it added it's still mighty slow.
3. Since there are that many people reproducing it, if there would be will to tackle it, I am guessing there would be a line of people wanting to provide logs, input, and beta test. I am not sure if I subscribe to the 'difficult to reproduce' being the root cause.
4. In addition, using too course of a grouping makes some information channels unusable, while they still struggle with performance - so that's out of the question.

[pspeirs]

Remember too that if someone else wishes to have a crack at it, fork the project.

[RomRider]

As I said, I'm not able to reproduce, it might be caused by external factors or massive history or your specific setup.

Unless someone provides a simple way to reproduce the issue 100% of the time, I'm afraid I can't do anything about it!

Simple way = 1 chart in one dashboard alone with the minimum required config on the card and with the minimum list of other cards/resources enabled to make it slow, and an extract of the history of the entity in json using the api to collect it so that I can inject it in my setup

You also have to do your part of the job for me to be able to try to fix that (if there's something to fix in the card)

[PierreMarieBaty]

Let me help you fix that.
I was struck too while trying to graph a large dataset, which instantly made HA unusable. The problem was, of course, in the number of samples that are feed to the plotter.
How to fix: copy/paste this in each of your series:

    group_by:
      func: avg
      duration: 1h

@RomRider : you should definitely make this a default setting, or undersample when more than N samples are fed to ApexChart. New users (like me) will naively think they can plot a data series of any length without performance issues.

[convicte]

@PierreMarieBaty respectfully that is the most 'TL:DR while mansplaining' response I've seen in a while.

No, that is not a fix (not even a workaround) nor is it any different from what majority of the people in the thread reported to have been using from the start while still experiencing performance issues.

Not to mention that averaging is only possible with continuous variables while at least some people reported having worked with entities that cannot be averaged at all.

So TL:DR - it's always a good idea to at least read the last 5 comments before making such authoritative statements.

[PierreMarieBaty]

@convicte Apologies for the mansplaining. The TL;DR diagnosis is right though, I totally endorse it. I wrote that from the point of view of the average user looking for a usable multichart card for HomeAssistant who doesn't expect to spend hours on it. Pretty sure I'm not the only one : without that setting even the provided graph samples are unusable. As there was no indication that feeding a large dataset to the graph code would freeze the UI, and considering the average user was not supposed to expect that behavior as competing chart solutions handle them well, I was about to throw it away and pester against yet another open source garbage, but gave it a second thought and attempted to "fix" that myself. Call that as you wish, not a fix not even a workaround, it makes the solution usable. That's all the average user needs to know, and I persist thinking it should be a default setting.

[IntExCZ]

Example of a failure to load, but there are many other ways it fails:

Without pressing F5 to refresh, the page would remain like this. The next time over, it would keep spinning the loading wheels for 30-40 seconds before slowly populating the card.

@convicte What is this kind of graph, please?

[convicte]

@IntExCZ - Here you go: https://github.com/MindFreeze/ha-sankey-chart

[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.

[Ferrox85]

I'm having the same issue. It freezes the complete HASS system on both ends. Console gives the following errors when trying to reload the graph:

The code I use:

type: custom:apexcharts-card
graph_span: 10d
update_interval: 1h
stacked: true
header:
  show: true
  title: Opbrengst PV
yaxis:
  - id: first
  - id: second
    opposite: true
series:
  - entity: sensor.opbrengst_zonnepanelen
    name: Omzet PV
    type: column
    yaxis_id: first
    opacity: 0.8
    color: '#03b2cb'
    group_by:
      duration: 1d
      func: diff
    show:
      legend_value: false
  - entity: sensor.netto_kosten_zonnepanelen
    name: ROI PV
    yaxis_id: second
    type: line
    opacity: 0.8
    color: '#cb6f02'
    group_by:
      duration: 1d
      func: last
    show:
      legend_value: false

It doesn't load longer than 10days in my experience. I assume it uses the short term statistics, where it would be better to use long term statistics with this setup. The data is updated every 5 seconds. So it generates a lot of datapoints.

I can read code, but haven't developed for HASS yet. Hence, I am using HASS for a few months now. I want more of these type of graphs, because they are very beautiful in giving insight in daily volumes (ex. power usage an total usage) If I want to debug this I need time and soms hints where to start.

Ok, i've looked in to it, it is not on the browser side as fa as I can evaluate this. It doesn't always happen with all the sensors. It vary's a lot and It takes up to 30/40 seconds from the server to respond on the request. It almost looks like it's a hass core problem instead of an Apex Chart issue. Not sure yet how to debug the back end, but i'll try look in to it. From the request line, there is no FROM date in the request. I assume the server then sends all the data it has. And that could be a lot when it is not narrowed down.

[mortenalbring]

I'm having the same issue. It freezes the complete HASS system on both ends. Console gives the following errors when trying to reload the graph:

Is it possible to use

group_by:
  func: avg
  duration: 1h

in your case? As far as I'm aware, that's still the only known workaround for this issue. It's annoying to have to add it in to every chart every time, but it does seem to solve the issue for most of us.

[Ferrox85]

I can do that, but I want the diff between the days. I can confirm it is a bug in backend of HASS. Because other front end implementations suffer the same slow performance. (like https://github.com/dbuezas/lovelace-plotly-graph-card for instance). It is possible to achieve the same result but does take a long time either to load. Not shure what to do next. rebuidling my database as we speak but I don't think that is going to be the solution.

The custom:mini-graph-card hasn't got this issue. It is stil slow, but 4x faster. It does it in about 10 seconds

Hmm...now it is overall fast (stil 10s, but the amount of data is the same), also apex charts. It is really weird behavior

[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.

[roblomq]

For those who are intereseted, I had the same experience with the extreme slow performance after I added a apex chart to my HA. It took me verry long to be even able to remove the chart. Seems that it does not work well for me so I removed apex chart.

[alphasixtyfive]

For those who are intereseted, I had the same experience with the extreme slow performance after I added a apex chart to my HA. It took me verry long to be even able to remove the chart. Seems that it does not work well for me so I removed apex chart.

I have same expirience, it takes up to 3 mins for some charts to load yet there is no alternative so far which have time on X scale sadly.