# \[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:** 5

<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:** [Août 23, 2022, 11:23 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/83 "2022-08-23T11:23:26Z")

</div>

Je me réponds à moi même, j'ai finalement trouvé la solution :

- ![Screenshot_20220823-131938_Home Assistant](https://forum.hacf.fr/uploads/default/original/3X/e/f/ef784831a476cc8b2df85589e52c154c275049ca.jpeg)

```auto
type: custom:apexcharts-card
chart_type: donut
header:
  show: true
  title: Répartition énergétique journalière
  show_states: true
  colorize_states: true
apex_config:
  dataLabels:
    formatter: |
      EVAL:function(value) {
        return value.toFixed(0) + " %";
      }
  plotOptions:
    pie:
      donut:
        labels:
          show: true
          total:
            show: true
            label: Total
            formatter: |
              EVAL:function(w) {
                return w.globals.seriesTotals.reduce((a, b) => {return (a + b)} , 0).toFixed(1) + " kWh"
                }
series:
  - entity: sensor.bilan_autoconso_gain_3000wc_now
    name: Prod. solaire
    float_precision: 1
    color: '#2ECC71'
  - entity: sensor.daily_lg_chem_total_energy_saved
    name: Fourn. batteries
    float_precision: 1
    color: '#3498DB'
  - entity: sensor.daily_lg_chem_simulated_grid_export_after_battery_charging
    name: Réinj. ENEDIS
    float_precision: 1
    color: '#8E44AD'
  - entity: sensor.daily_lg_chem_simulated_grid_import_after_battery_discharging
    name: Conso ENEDIS
    float_precision: 1
    color: '#E74C3C'

```

---

<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:** [Août 23, 2022, 6:38 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/84 "2022-08-23T18:38:21Z")

</div>

Bonjour,

J’ai crée un simple graphique en colonne, pour ma production photovoltaïque.

J’aimerai afficher en haut de chaque barre les productions en kwh.

J’ai vu que normalement je dois ajouter

show:  
datalabels: true

Mais j’ai un message d’erreur

/// apexcharts-card version 2.0.1 /// value.show is not an object value.datalabels is extraneous

Merci

---

<div class="post-metadata">

**Author:** ![ClassicRed](https://forum.hacf.fr/user_avatar/forum.hacf.fr/classicred/32/27071_2.png) [@ClassicRed](https://forum.hacf.fr/u/ClassicRed)\
**Post date:** [Août 24, 2022, 9:35 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/85 "2022-08-24T09:35:24Z")

</div>

@Jeremy

Essai cela

```auto
type: custom:apexcharts-card
graph_span: 7d
span:
  start: day
  offset: '-7d'
stacked: true
header:
  show: false
  title: Conso à 7 jours
apex_config:
  chart:
    type: area
    height: 400
  stroke:
    show: true
    width: 1
    curve: smooth
  legend:
    show: true
  fill:
    type: gradient
    gradient:
      shadeIntensity: 0.1
      opacityFrom: 0.25
      opacityTo: 1
      inverseColors: true
      stops:
        - 0
        - 90
        - 100
series:
  - color: rgb(138,43,226)
    entity: sensor.enedisgateway_212xxxxxxxx249
    type: column
    group_by:
      func: diff
      duration: 24h
    show:
      datalabels: true

```

---

<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:** [Août 24, 2022, 1:31 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/86 "2022-08-24T13:31:57Z")

</div>

Merci beaucoup sa ma bien aidé

autre question, est il possible de faire défilé un graphique ?

 ![299747080_594200332171786_4725664990660192263_n (1)](https://forum.hacf.fr/uploads/default/original/3X/1/1/1159c34ee49090d0da744640295b89451a5277d4.png)

Sue cette image j'ai une heure de production photovoltaïque, j'aimerai pouvoir revenir en arrière. Est-ce possible ?

merci

---

<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 1, 2022, 1:45 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/89 "2022-09-01T13:45:01Z")

</div>

Bonjour à tous,

Quelqu’un sais pourquoi mes graphiques des valeurs fausses

pour aujourd’hui j’ai une production photovoltaïque de 15Kwh mais le graphique me donne que 9kwh

La sensor.photovoltaique\_total\_energy affiche bien 15Kwh mais pas dans mon graphique.

pourquoi ?

Est-ce la fonction ci-dessous qui pose problème ?

```auto
    group_by:
      func: diff

```

Merci

```auto
type: custom:apexcharts-card
graph_span: 15d
span:
  start: day
  offset: '-9d'
stacked: true
header:
  show: true
  title: Production à 15 jours
  show_states: true
apex_config:
  chart:
    type: area
    height: auto
  stroke:
    show: true
    width: 1
    curve: smooth
  legend:
    show: true
  fill:
    type: gradient
    gradient:
      shadeIntensity: 0.1
      opacityFrom: 0.25
      opacityTo: 1
      inverseColors: true
      stops:
        - 0
        - 90
        - 100
series:
  - color: rgb(37,49,217)
    entity: sensor.photovoltaique_total_energy
    type: column
    group_by:
      func: diff
      duration: 24h
    show:
      datalabels: true

```

---

<div class="post-metadata">

**Author:** ![xtro](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/x/b2d939/32.png) [@xtro](https://forum.hacf.fr/u/xtro)\
**Post date:** [Septembre 11, 2022, 8:50 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/90 "2022-09-11T08:50:47Z")

</div>

> [@xtro](#):
>
> bonjour
> 
> je cherche à additionner la valeur de 2 entités et à l’afficher , mais je n’arrive pas à trouver la maniere d’additionner ces valeurs auriez vous une solution ?  
> merci

un petit up , par contre si c’est impossible merci de me le dire 🙂

---

<div class="post-metadata">

**Author:** ![morganbzh](https://forum.hacf.fr/user_avatar/forum.hacf.fr/morganbzh/32/18532_2.png) [@morganbzh](https://forum.hacf.fr/u/morganbzh)\
**Post date:** [Septembre 16, 2022, 10:25 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/91 "2022-09-16T10:25:17Z")

</div>

Voici un graphe que j'ai fais pour visualiser rapidement les températures et précipitations des trois derniers jours et des deux jours à venir.

 ![Capture d’écran du 2022-09-16 12-21-18](https://forum.hacf.fr/uploads/default/original/3X/4/5/45697a24c498f468794157546d88b30714d9521b.png)

Le code si jamais...

```auto
type: custom:apexcharts-card
graph_span: 4d
all_series_config:
  stroke_width: 2
yaxis:
  - id: first
    show: true
    apex_config:
      tickAmount: 4
      title:
        text: °C
      forceNiceScale: false
      decimalsInFloat: false
  - id: second
    show: true
    opposite: true
    apex_config:
      title:
        text: mm
      tickAmount: 4
      decimalsInFloat: false
span:
  start: day
  offset: '-2d'
header:
  show: true
  show_states: true
  title: Météo
now:
  show: true
  label: Maintenant
apex_config:
  dataLabels:
    enabled: false
series:
  - entity: weather.openweathermap
    yaxis_id: first
    name: Temperature
    show:
      extremas: true
      in_header: true
      legend_value: false
    unit: °C
    attribute: temperature
    curve: smooth
    extend_to: now
    fill_raw: last
    group_by:
      func: avg
      duration: 1h
  - entity: weather.saint_sylvestre
    show:
      legend_value: false
      in_header: false
    yaxis_id: first
    name: Prévision °C
    curve: smooth
    type: line
    color: e36f9a
    extend_to: end
    data_generator: |
      return entity.attributes.forecast.map((entry) => {
        return [new Date(entry.datetime).getTime(), entry.temperature];
      });
  - entity: sensor.saint_sylvestre_daily_precipitation
    yaxis_id: second
    show:
      legend_value: false
      in_header: false
    color: 2ba6c2
    stroke_width: 4
    curve: smooth
    name: Pluie
    type: column
    group_by:
      duration: 4h
      func: last
      fill: last
  - entity: weather.saint_sylvestre
    yaxis_id: second
    name: Précipitation à venir
    stroke_width: 4
    type: column
    show:
      legend_value: false
      in_header: false
    color: cyan
    extend_to: end
    group_by:
      duration: 4h
      func: last
      fill: last
    data_generator: |
      return entity.attributes.forecast.map((entry) => {
        return [new Date(entry.datetime).getTime(), entry.precipitation];
      });

```

---

<div class="post-metadata">

**Author:** ![Bob](https://forum.hacf.fr/user_avatar/forum.hacf.fr/bob/32/64908_2.png) [@Bob](https://forum.hacf.fr/u/Bob)\
**Post date:** [Septembre 16, 2022, 10:56 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/92 "2022-09-16T10:56:14Z")

</div>

Cool mais tu es où pour avoir tant de pluie, pas en Bretagne j’imagine 🤣

---

<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:** [Septembre 16, 2022, 11:22 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/93 "2022-09-16T11:22:44Z")

</div>

Rhaaa le Bretagne c’est bizarrement foutu ! Tu regardes la météo : il y toujours de la pluie. Tu écoutes les locaux : il y a toujours du grand soleil… Moi je pense que c’est fait exprès pour pas envie de venir aux Parisiens !

---

<div class="post-metadata">

**Author:** ![morganbzh](https://forum.hacf.fr/user_avatar/forum.hacf.fr/morganbzh/32/18532_2.png) [@morganbzh](https://forum.hacf.fr/u/morganbzh)\
**Post date:** [Septembre 16, 2022, 11:25 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/94 "2022-09-16T11:25:51Z")

</div>

Ahahah non en Haute-Savoie, c’est pas mal en pluviométrie aussi ! ☂

---

<div class="post-metadata">

**Author:** ![Bob](https://forum.hacf.fr/user_avatar/forum.hacf.fr/bob/32/64908_2.png) [@Bob](https://forum.hacf.fr/u/Bob)\
**Post date:** [Septembre 16, 2022, 11:51 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/95 "2022-09-16T11:51:10Z")

</div>

Le temps change vite 🙂

 ![image](https://forum.hacf.fr/uploads/default/original/3X/c/1/c14b95d4067a21679a9a915561a52c06bd677b47.png)

---

<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 22, 2022, 3:38 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/96 "2022-09-22T15:38:19Z")

</div>

Bonjour,

Quelqu’un sait me dire où est le soucis.

Avec ce graphique tout home assistant est très lent.jusqu’à 5 min d’attente pour passé d’une page à l’autre.

Home assistant sur un synology DS218+ utilise au max 15% du Cpu et 20% de ram

Merci

```auto

type: custom:apexcharts-card
graph_span: 24h
stacked: true
header:
  show: true
  title: Production
  show_states: true
apex_config:
  yaxis:
    - title:
        text: Production
      decimalsInFloat: 0
      min: 0
      max: 4050
    - title:
        text: Consommation
      decimalsInFloat: 0
      min: 0
      max: 8000
      opposite: true
  chart:
    zoom:
      enabled: true
    toolbar:
      show: true
      tools:
        download: true
        selection: true
        zoom: true
        zoomin: true
        zoomout: true
        pan: true
        reset: true
    type: area
    height: auto
  stroke:
    show: true
    width: 1
    curve: smooth
  legend:
    show: true
series:
  - color: rgb (26,158,11)
    entity: sensor.shellyem_244cab4326d4_channel_2_power
    type: area
    name: Production
    show:
      extremas: true
      datalabels: false
  - color: red
    entity: sensor.consommation_total
    type: line
    name: Consommation
    show:
      extremas: true
      datalabels: false
view_layout:
  position: main

```

 ![image](https://forum.hacf.fr/uploads/default/original/3X/0/0/005e6882794d070d44d8db261270de0887d110b0.jpeg)

---

<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 23, 2022, 10:46 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/97 "2022-09-23T10:46:17Z")

</div>

Salut @Jeremy,

Quelle est ton infrastructure matériel, j’ai essayé de chercher ta présentation mais je ne l’ai pas trouvé.

---

<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 23, 2022, 2:22 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/98 "2022-09-23T14:22:49Z")

</div>

Un synology DS218+ avec 6Go de ram

---

<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 23, 2022, 4:32 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/99 "2022-09-23T16:32:24Z")

</div>

> [@Jeremy](#):
>
> Un synology DS218+ avec 6Go de ram

Au temps pour moi, tu l’avais mis dans ton message précédent…  
Je ne vois pas de choses choquante dans ton code mais je ne suis absolument pas expert.

Concernant ton soucis, comme le graphique est lent à charger mais qu’il fonctionne, on peut émettre une hypothèse qu’il y a énormément de données à charger, peut-être peux-tu imposer le sampling des données ?

Je n’ai pas regardé si cela est valable pour ton graphique mais dans les miens j’inclus un «&nbsp; **points\_per\_hour: 30** &nbsp;» ce qui fait 24h \* 30 =\> 720points par courbe.

Si on ne l’impose pas, peut-être que le système cherche à afficher l’ensemble des points présent dans sa base de donnée ce qui fait énormément de data. En admettant que la variable soit rafraichi chaque seconde, 24h \* 3600 =\> 86400 points par courbe.

je ne sais pas si ma piste est valable mais ça vaut le coup de regarder.

---

<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 23, 2022, 4:59 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/100 "2022-09-23T16:59:08Z")

</div>

J’ai essayé avec :

```auto

update_interval: 30s

```

Et

```auto

update_interval: 60s

```

Sa ne change rien.

Quand je supprime ce graphique tous reviens à là normal.

C’est pas les sondes Shelly qui plante ?

---

<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 23, 2022, 5:47 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/101 "2022-09-23T17:47:05Z")

</div>

«&nbsp;Update\_interval&nbsp;» =\> Correspond à l’intervalle entre 2 chargement des données donc cela ne change pas la quantité de données à charger.

---

<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 23, 2022, 6:11 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/102 "2022-09-23T18:11:44Z")

</div>

**points\_per\_hour: 30** Je dois l’intègre ou ?

---

<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 23, 2022, 11:15 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/103 "2022-09-23T23:15:59Z")

</div>

J’ai trouvé ce qui cloche.

C’est `sensor.consommation_total ` qui cause le ralentissement. Dès que je l’enlève plus de soucis.

C’est un template que j’ai crée.

```auto

template:
- sensor:
  - name: Consommation Total
    unit_of_measurement: "W"
    state: >
     {{ ( (states('sensor.shelly_shem_244cab4326d4_1_current_consumption') | float(default=0) ) + (states('sensor.shelly_shem_244cab4326d4_2_current_consumption') | float(default=0) ) ) | round(2) }}

```

Ce n’est qu’une addition basic mais c’est déjà trop.

Quelqu’un a une autre solution pour additionner 2 sondes ?

---

<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 24, 2022, 10:56 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/104 "2022-09-24T10:56:26Z")

</div>

Ça donne quoi si tu graphes les entités séparément ?  
L’idee est de savoir si le problème vient de l’addition ou des entités sources.

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

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