# \[CARTE\] Apexcharts-card

**URL:** <https://forum.hacf.fr/t/carte-apexcharts-card/2686>\
**Category:** Interface / Lovelace / Thème / Custom Card\
**Created:** [Février 3, 2021, 9:42 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686 "2021-02-03T21:42:47Z")\
**Posts on this page:** 20\
**Page:** 6

<div class="post-metadata">

**Author:** ![Jeremy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/jeremy/32/17196_2.png) [@Jeremy](https://forum.hacf.fr/u/Jeremy)\
**Post date:** [Septembre 24, 2022, 1:55 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/105 "2022-09-24T13:55:49Z")

</div>

J’ai essayé, lorsque je supprime le graphique avec ce sensor, tous est ok. Je la intégré seul dans un graphique et sa recommence.

---

<div class="post-metadata">

**Author:** ![Jeremy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/jeremy/32/17196_2.png) [@Jeremy](https://forum.hacf.fr/u/Jeremy)\
**Post date:** [Septembre 24, 2022, 11:39 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/106 "2022-09-24T23:39:32Z")

</div>

Comment faire que le graphique ne ce mette pas à jours tous les sec ?

---

<div class="post-metadata">

**Author:** ![Neuvidor](https://forum.hacf.fr/user_avatar/forum.hacf.fr/neuvidor/32/22140_2.png) [@Neuvidor](https://forum.hacf.fr/u/Neuvidor)\
**Post date:** [Septembre 25, 2022, 6:46 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/107 "2022-09-25T06:46:57Z")

</div>

> [@Jeremy](#):
>
> Comment faire que le graphique ne ce mette pas à jours tous les sec ?

Je t’en ai parlé juste au dessus

```auto
update_interval: 30s

```

---

<div class="post-metadata">

**Author:** ![Jeremy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/jeremy/32/17196_2.png) [@Jeremy](https://forum.hacf.fr/u/Jeremy)\
**Post date:** [Septembre 25, 2022, 8:36 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/108 "2022-09-25T08:36:44Z")

</div>

Lol c’est moi qui en ai parlé de dette commandé plus haut et ça ne changeais rien.

---

<div class="post-metadata">

**Author:** ![Herbs](https://forum.hacf.fr/user_avatar/forum.hacf.fr/herbs/32/8029_2.png) [@Herbs](https://forum.hacf.fr/u/Herbs)\
**Post date:** [Septembre 25, 2022, 9:19 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/109 "2022-09-25T09:19:46Z")

</div>

Sur des graphes avec énormément de pt ça semble être relativement fréquent :

> <https://github.com/RomRider/apexcharts-card/issues/210>
>
> \*\*Checklist\*\*
> \- \[x\] I updated the card to the latest version available
> \- \[x\] I… cleared the cache of my browser
> \- \[x\] I verified that I'm really running the lastest version in my browser console
> \- \[x\] 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:
> \`\`\`yaml
> 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.
> 
> !\[Screenshot 2021-09-15 at 10-35-01 Overview - Home Assistant\](https://user-images.githubusercontent.com/10679300/133353779-2bfd4af5-0791-40c4-9d28-9401965def03.png)
> 
> 
> \*\*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.

Maintenant une des solutions proposée (et je me doute que c’est pas ce que tu cherches) est de passer une fonction «&nbsp;avg&nbsp;» au sensor posant problème.

Bref dans ton cas juste pour voir si ça a un impact tu peux tester :

```auto
  - color: red
    entity: sensor.consommation_total
    type: line
    name: Consommation
    group_by:
      func: avg
      duration: 5min
    show:
      extremas: true
      datalabels: false

```

Et au pire voir si «&nbsp;plotly&nbsp;» pourrait faire le taf.

> **[GitHub - dbuezas/lovelace-plotly-graph-card: Highly customisable Lovelace...](https://github.com/dbuezas/lovelace-plotly-graph-card)**
>
> Highly customisable Lovelace card to display interactive graphs. Brings scrolling, zooming, and much more! - GitHub - dbuezas/lovelace-plotly-graph-card: Highly customisable Lovelace card to displa...

---

<div class="post-metadata">

**Author:** ![Jeremy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/jeremy/32/17196_2.png) [@Jeremy](https://forum.hacf.fr/u/Jeremy)\
**Post date:** [Septembre 25, 2022, 2:16 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/110 "2022-09-25T14:16:56Z")

</div>

La fonction AVG donne des valeurs incohérente

---

<div class="post-metadata">

**Author:** ![Herbs](https://forum.hacf.fr/user_avatar/forum.hacf.fr/herbs/32/8029_2.png) [@Herbs](https://forum.hacf.fr/u/Herbs)\
**Post date:** [Septembre 25, 2022, 2:28 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/111 "2022-09-25T14:28:58Z")

</div>

Je sais 😉 l’idée c’était juste de voir si le temps du test de cette fonction les perfs étaient meilleurs.

---

<div class="post-metadata">

**Author:** ![Jeremy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/jeremy/32/17196_2.png) [@Jeremy](https://forum.hacf.fr/u/Jeremy)\
**Post date:** [Septembre 25, 2022, 3:05 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/112 "2022-09-25T15:05:29Z")

</div>

> [@Herbs](#):
>
> ```auto
> group_by:
> func: avg
> duration: 5min
> 
> ```

Je confirme qu’en Avg sa fonctionne bcp mieux.

par quoi je pourrai remplacer avg ?

---

<div class="post-metadata">

**Author:** ![Man44](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/m/a587f6/32.png) [@Man44](https://forum.hacf.fr/u/Man44)\
**Post date:** [Octobre 7, 2022, 3:29 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/113 "2022-10-07T15:29:40Z")

</div>

@Ives,  
je me suis également lancé dans le dashboard energie. Je suis également bloqué sur les utility meter pour créer les sensor last\_day / last\_week / last\_mount / last\_year.  
As-tu trouvé réussi à les mettre en place ?

---

<div class="post-metadata">

**Author:** ![Man44](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/m/a587f6/32.png) [@Man44](https://forum.hacf.fr/u/Man44)\
**Post date:** [Octobre 9, 2022, 8:57 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/114 "2022-10-09T08:57:59Z")

</div>

Galadan,

je souhaiterais arriver au même tableau synthétique mais pour ma conso électrique (données provenant de Lixee). Je galère vraiment avec les utility meter pour remonter créer les et afficher les valeurs de la veille/ semaine précédente / mois précédent / année précédente.  
Tu aurais moyen d’afficher une copie de ton code pour que je m’en inspire.  
Merci 😉

---

<div class="post-metadata">

**Author:** ![Galadan](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/g/90ced4/32.png) [@Galadan](https://forum.hacf.fr/u/Galadan)\
**Post date:** [Octobre 11, 2022, 8:31 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/115 "2022-10-11T08:31:43Z")

</div>

Hello,

Voici mes utility\_meter:

```auto
> daily_water:
> source: sensor.compteur_d_eau
> cycle: daily
> weekly_water:
> source: sensor.compteur_d_eau
> cycle: weekly
> monthly_water:
> source: sensor.compteur_d_eau
> cycle: monthly
> yearly_water:
> source: sensor.compteur_d_eau
> cycle: yearly

```

Je sais pas si cela va t’aider.

---

<div class="post-metadata">

**Author:** ![Gwendal](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/g/dbc845/32.png) [@Gwendal](https://forum.hacf.fr/u/Gwendal)\
**Post date:** [Octobre 18, 2022, 12:10 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/117 "2022-10-18T00:10:17Z")

</div>

Bonjour,  
je rencontre un petit problème avec la carte Aphexchart.  
Je découvre la carte et je voudrais mettre l’un en dessous de l’autre ma conso électrique du jour et celle de la veille. j’ai copier coller le code et j’ai juste ajouté offset: ‹ -1d › pour le graphique de la veille.  
Une fois affiché ils n’ont pas tout à fait la même abscisse, une prend bien toute la longueur (la veille) et pas l'autre, je n'arrive pas à comprends pourquoi ni à résoudre ce problème.  
Si jamais vous avez une idée, je suis preneur !?

 ![graph](https://forum.hacf.fr/uploads/default/original/3X/b/a/baed8ddf5df5890a76502e762b57ed9a1642d393.jpeg)

---

<div class="post-metadata">

**Author:** ![Pulpy-Luke](https://forum.hacf.fr/user_avatar/forum.hacf.fr/pulpy-luke/32/137426_2.png) [@Pulpy-Luke](https://forum.hacf.fr/u/Pulpy-Luke)\
**Post date:** [Octobre 18, 2022, 5:12 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/118 "2022-10-18T05:12:53Z")

</div>

Salut.  
Tu es certain d’avoir 2 jours de données complets ?  
Genre tu poste à 2h du matin, donc tu n’a les données que 0h à 2h…  
Mais bon ça reste théorique puisque tu n’as pas partagé le code de ta carte

---

<div class="post-metadata">

**Author:** ![Gwendal](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/g/dbc845/32.png) [@Gwendal](https://forum.hacf.fr/u/Gwendal)\
**Post date:** [Octobre 18, 2022, 9:43 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/119 "2022-10-18T09:43:39Z")

</div>

voici le code pour celle du jour (le code pour le jour d’avant est identique j’ai juste mis un offset -1d

```auto
type: custom:apexcharts-card
graph_span: 24h
span:
  start: day
header:
  show: true
  title: Conso temps réel
  show_states: true
  colorize_states: true
series:
  - entity: sensor.conso_linky_iinst
    curve: smooth
    color: '#df6366'
    type: column
    opacity: 0.6
    stroke_width: 1
    group_by:
      duration: 60min
      func: avg

```

C’est normal de n’avoir les données que de 0h à 2h puisque que le graph commence à 0h tous les jours. (je ne l’avais pas précisé).  
Maintenant qu’il est 11h l’abscisse c’est décalée et se retrouve bien au même niveau que le jour d’avant, mais savez-vous si il y’a un moyen quel soit identique ?

---

<div class="post-metadata">

**Author:** ![Uowis](https://forum.hacf.fr/user_avatar/forum.hacf.fr/uowis/32/9748_2.png) [@Uowis](https://forum.hacf.fr/u/Uowis)\
**Post date:** [Octobre 18, 2022, 5:39 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/120 "2022-10-18T17:39:53Z")

</div>

Si l'idée est de comparer deux jours tu peux peu etre les mettre tous les deux dans la meme graph?  
Sinon il y ca a aussi :

> **[Synchronized charts guide | ApexCharts.js](https://apexcharts.com/docs/chart-types/synchronized-charts/)**
>
> Read the synced chart guide on how to create multiple charts that share the same x-axis and update all charts when user interacts with any one of them.

et sinon j'ai essayé ton code et de mon coté j'ai la journée complète donc je comprend pas trop,...

 ![image](https://forum.hacf.fr/uploads/default/original/3X/5/7/57b861894ae592bfee9626e159798d58af4d437a.png)

---

<div class="post-metadata">

**Author:** ![Gwendal](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/g/dbc845/32.png) [@Gwendal](https://forum.hacf.fr/u/Gwendal)\
**Post date:** [Octobre 18, 2022, 10:09 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/121 "2022-10-18T22:09:54Z")

</div>

J’ai chercher un peu plus, et j’ai superposé les deux graphiques effectivement.  
Le bug c’est résolu de lui même une fois la première journée complète, comme je viens de recevoir le module Zlinky il n’avait pas encore pu enregistré 24h ce qui doit causer se «&nbsp;bug&nbsp;» les premières heures.

---

<div class="post-metadata">

**Author:** ![Uowis](https://forum.hacf.fr/user_avatar/forum.hacf.fr/uowis/32/9748_2.png) [@Uowis](https://forum.hacf.fr/u/Uowis)\
**Post date:** [Novembre 9, 2022, 9:17 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/122 "2022-11-09T09:17:07Z")

</div>

Bonjour a tous,  
j'ai une valeur de status qui ne se met pas a jour sur la dernière valeurs :

 ![image](https://forum.hacf.fr/uploads/default/original/3X/f/8/f82b4c9551ac03bb8fc0d032f5fc3bbf4de50134.png)  
Est ce que quelqu'un a déjà eu ce souci ?

---

<div class="post-metadata">

**Author:** ![Uowis](https://forum.hacf.fr/user_avatar/forum.hacf.fr/uowis/32/9748_2.png) [@Uowis](https://forum.hacf.fr/u/Uowis)\
**Post date:** [Novembre 9, 2022, 9:42 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/123 "2022-11-09T09:42:26Z")

</div>

Je pense avoir trouver la logique est un peu bizarre mais il faudrait augmenter «&nbsp;update\_delay&nbsp;» a ce que je comprend

---

<div class="post-metadata">

**Author:** ![Dapolux](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/d/90ced4/32.png) [@Dapolux](https://forum.hacf.fr/u/Dapolux)\
**Post date:** [Novembre 13, 2022, 10:13 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/124 "2022-11-13T10:13:02Z")

</div>

Bonjour,

1. Comment soustraire 2 séries en une seule?

Je cherche à afficher sous forme de colonnes empilées, des capteurs (pas de problèmes pour cela), et des soustractions de capteurs (c'est là que ça pose problème). Dans mon exemple, j'ai des capteurs de consommation pour un circuit électrique, puis un pour le tableau entier, je cherche à afficher la différence entre les 2.

L'option "transform" semblait répondre à ce besoin, seulement l'historique n'est pris que sur l'entité de la série analysée, on ne peux pas avoir plusieurs séries (l'utilisation des variables hass.states['other.entity'] renvoie que la dernière valeur).  
2).

Exemple:

```auto
#---------------------------------------------------------------
# Graph total
#--------------------------------------------------------------- 
    - type: custom:apexcharts-card
      header:
        show: true
        title: Consommation cumulée (en kW)
        show_states: false
        colorize_states: true
      graph_span: 7day
      stacked: true
      span:
        start: day
        offset: '-6day'
      series:
      
        - entity: sensor.enedis_puissance_du_jour
          type: column
          name: Reste de la maison
          transform: "return x - hass.states['sensor.tableau_cave_puissance_du_jour'].state;"
          group_by:
            duration: 1day
            func: max
          show:
            datalabels: true  

         
             

        - entity: sensor.tableau_cave_puissance_du_jour
          type: column
          name: Reste du tableau de la cave
          transform: "return x - hass.states['sensor.ballon_ecs_puissance_du_jour'].state;"
          group_by:
            duration: 1day
            func: max
          show:
            datalabels: true  
            
            
        - entity: sensor.ballon_ecs_puissance_du_jour
          type: column
          name: Ballon
          group_by:
            duration: 1day
            func: max
          show:
            datalabels: true           
           
      apex_config:
        chart:
          height: 600px

```

Biensur je peux toujours créer un capteur supplémentaire qui serais la différence des 2 (faute de mieux c'est ce que je fais pour le moment), mais au delà d'alourdir la base de données, cela ne recalcule pas l'historique. Et pour des calculs plus complexes (j'ai des idées en tête) cela nécessite toujours plus de sensors en base.

Une idée qui pourrais répondre à ce besoin?

1. yaxis max erroné en mode auto

Je ne sais pas si c'est à cause du mode "stacked", mais si on force la valeur minimale du yaxis:

```auto
      yaxis:
      - min: 0
        max: auto

```

La valeur maximale semble mal déterminée:

 ![image](https://forum.hacf.fr/uploads/default/original/3X/2/6/266c5fa8ca9c464b6e450969ef5d9c8f6c676e8a.png)

En mode auto (donc sans paramétrer de min/max), pas de problèmes:

 ![image](https://forum.hacf.fr/uploads/default/original/3X/2/a/2afd3fb3ee024b6171f443ea6ab248f6b27cbc32.png)

Dans le cas présent ce n'est pas gênant pour moi car j'ai bien un mini à 0. Mais sinon, soit j'utilise pas le paramètre comme il faut, soit il y a peut être un bug.

---

<div class="post-metadata">

**Author:** ![Galadan](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/g/90ced4/32.png) [@Galadan](https://forum.hacf.fr/u/Galadan)\
**Post date:** [Décembre 27, 2022, 11:55 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/125 "2022-12-27T11:55:58Z")

</div>

Hello,

J'ai un petit soucis que je n'arrive pas à régler.  
J'ai créé ce graph:

```auto
type: "custom:apexcharts-card"
        graph_span: 7d
        span:
          end: day
        header:
          show: true
          title: Consommations des 7 derniers jours
          show_states: true
          colorize_states: true
        apex_config:
          xaxis:
            labels:
              show: true
          yaxis:
            labels:
              show: true
          legend:
            show: false
        series:
          - entity: sensor.daily_water
            name: Conso
            unit: L
            color: deepskyblue
            type: column
            group_by:
              func: diff
              duration: 24h
            opacity: 0.8
            stroke_width: 4
            show:
              datalabels: true
          - entity: sensor.water_cost_daily
            name: Coût
            unit: €
            color: orange
            type: column
            group_by:
              func: diff
              duration: 1d
            opacity: 0.8
            stroke_width: 4
            show:
              datalabels: true

```

Mais je n'ai pas les data sur 7 jours...

 ![image](https://forum.hacf.fr/uploads/default/original/3X/2/0/20f860ecdbe398b96b83f9ae275461e2c3920b1a.png)

Mes sensor en question:

 ![image](https://forum.hacf.fr/uploads/default/original/3X/b/5/b5afffd8eddfc972e30d39981851c339c6f7e5ee.png)  
 ![image](https://forum.hacf.fr/uploads/default/original/3X/0/c/0c349652749f461e0e654e6ef587a7343f4907fb.png)

Une idée d'où viens le soucis?

[Page précédente](https://forum.hacf.fr/t/carte-apexcharts-card/2686.md?page=5)

[Page suivante](https://forum.hacf.fr/t/carte-apexcharts-card/2686.md?page=7)