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

<div class="post-metadata">

**Author:** ![RomRider](https://forum.hacf.fr/user_avatar/forum.hacf.fr/romrider/32/4285_2.png) [@RomRider](https://forum.hacf.fr/u/RomRider)\
**Post date:** [Mars 12, 2021, 10:17 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/22 "2021-03-12T10:17:02Z")

</div>

Il faut que t’enlèves `offset` aussi. Si tu mets `start: day` et que t’as des données c’est que t’as laissé l’offset j’ai l’impression.

---

<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:** [Mars 12, 2021, 10:37 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/23 "2021-03-12T10:37:42Z")

</div>

en effet, ça marche mieux ^^

 ![image](https://forum.hacf.fr/uploads/default/original/2X/4/4f8118203e1a54e4649fc695bd0f02a06c7e4326.png)

Merci beaucoup 🙂

---

<div class="post-metadata">

**Author:** ![saniho](https://forum.hacf.fr/user_avatar/forum.hacf.fr/saniho/32/394_2.png) [@saniho](https://forum.hacf.fr/u/saniho)\
**Post date:** [Mars 23, 2021, 8:39 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/24 "2021-03-23T20:39:34Z")

</div>

Est-ce que l’un d’entre vous à trouvé une solution pour mixer sur un meme graph des données de type differente avec des ordonnées min max differentes, exemple température min 10°C, max 40°C, et hydrometrie : 30% … 100% par exemple

---

<div class="post-metadata">

**Author:** ![foXaCe](https://forum.hacf.fr/user_avatar/forum.hacf.fr/foxace/32/320_2.png) [@foXaCe](https://forum.hacf.fr/u/foXaCe)\
**Post date:** [Avril 10, 2021, 4:38 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/25 "2021-04-10T16:38:56Z")

</div>

Bonjour,

Comment je peux faire pour que tout ce qui est en dessous le graph vert soit rempli de la même couleur afin de ne pas voir le deuxième graph rouge ?

Je ne suis pas sûr que ce soit possible

Voici le code de ma carte

 ![SharedScreenshot](https://forum.hacf.fr/uploads/default/original/2X/5/5da543c478124fdfd8a7461a69cad40e22ef3dc1.jpeg)

```auto
type: 'custom:apexcharts-card'
graph_span: 24h
span:
  end: day
header:
  show: false
series:
  - entity: sensor.panneaux_solaireenvoy_current_energy_production
    type: line
    name: Production
    color: green
    group_by:
      func: avg
      duration: 45min
  - entity: sensor.panneaux_solaireenvoy_current_energy_consumption
    type: column
    name: Consommmation
    color: red
    group_by:
      func: avg
      duration: 15min

```

---

<div class="post-metadata">

**Author:** ![Lolobuc54](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lolobuc54/32/139235_2.png) [@Lolobuc54](https://forum.hacf.fr/u/Lolobuc54)\
**Post date:** [Avril 11, 2021, 7:29 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/26 "2021-04-11T07:29:10Z")

</div>

Slt.  
Modifie type: line par area et ajoute une ligne opacity pour chaque entité...  
J'ai pas mieux.

 ![Capture](https://forum.hacf.fr/uploads/default/original/2X/c/cd0068dbe2e32a68b61a588119f8c0f5bb40ea28.png)

---

<div class="post-metadata">

**Author:** ![foXaCe](https://forum.hacf.fr/user_avatar/forum.hacf.fr/foxace/32/320_2.png) [@foXaCe](https://forum.hacf.fr/u/foXaCe)\
**Post date:** [Avril 11, 2021, 7:45 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/27 "2021-04-11T07:45:46Z")

</div>

super merci beaucoup

 ![SharedScreenshot](https://forum.hacf.fr/uploads/default/original/2X/a/a0b3f3abe563a3c487d0ebece76afbc964ba7e07.jpeg)

---

<div class="post-metadata">

**Author:** ![Lolobuc54](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lolobuc54/32/139235_2.png) [@Lolobuc54](https://forum.hacf.fr/u/Lolobuc54)\
**Post date:** [Avril 11, 2021, 7:49 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/28 "2021-04-11T07:49:52Z")

</div>

Pour une fois que je peux aider 😉.

---

<div class="post-metadata">

**Author:** ![foXaCe](https://forum.hacf.fr/user_avatar/forum.hacf.fr/foxace/32/320_2.png) [@foXaCe](https://forum.hacf.fr/u/foXaCe)\
**Post date:** [Avril 13, 2021, 4:26 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/29 "2021-04-13T04:26:17Z")

</div>

Bonjour,  
je n'arrive pas comprendre pourquoi ma carte créer la journée entiere a l'avance?

 ![01](https://forum.hacf.fr/uploads/default/original/2X/e/e9cb032d418849e66812489a3b6bcb0e17ccb341.jpeg)

```auto
type: 'custom:apexcharts-card'
graph_span: 24h
span:
  start: day
stacked: true
header:
  show: true
  title: Production Énergie
series:
  - entity: sensor.panneaux_solaireenvoy_current_energy_consumption
    type: area
    name: Conso
    color: red
    group_by:
      func: avg
      duration: 5min
  - entity: sensor.panneaux_solaireenvoy_current_energy_production
    type: area
    name: Prod
    color: green
    group_by:
      func: avg
      duration: 5min
  - entity: sensor.inst_energy_difference
    type: column
    name: Importé/Exporté
    transform: return x *-1 ;
    color: grey
    group_by:
      func: avg
      duration: 5min

```

---

<div class="post-metadata">

**Author:** ![Lolobuc54](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lolobuc54/32/139235_2.png) [@Lolobuc54](https://forum.hacf.fr/u/Lolobuc54)\
**Post date:** [Avril 13, 2021, 6:39 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/30 "2021-04-13T06:39:27Z")

</div>

Slt, en supprimant ces lignes, cela affichera en temps réel sans afficher les prochaines heures.

> [@foXaCe](#):
>
> ```auto
> span:
> start: day
> 
> ```

---

<div class="post-metadata">

**Author:** ![foXaCe](https://forum.hacf.fr/user_avatar/forum.hacf.fr/foxace/32/320_2.png) [@foXaCe](https://forum.hacf.fr/u/foXaCe)\
**Post date:** [Avril 13, 2021, 11:01 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/31 "2021-04-13T11:01:44Z")

</div>

excellent merci beaucoup

---

<div class="post-metadata">

**Author:** ![Ives](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/i/ba8739/32.png) [@Ives](https://forum.hacf.fr/u/Ives)\
**Post date:** [Mai 1, 2021, 9:31 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/32 "2021-05-01T09:31:53Z")

</div>

Bonjour,  
Une question probablement très con mais habituellement on dispose d’un un capteur et un outil vient lire périodiquement les données pour le stocker dans une base de données ; ensuite un outil graphique va lire cette base pour afficher des courbes, données,…  
Ici est-ce Apexcharts qui va lire le capteur et constituer lui-même la base de données ? Si où est-ce stocké ?

---

<div class="post-metadata">

**Author:** ![Ives](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/i/ba8739/32.png) [@Ives](https://forum.hacf.fr/u/Ives)\
**Post date:** [Mai 1, 2021, 11:34 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/33 "2021-05-01T11:34:16Z")

</div>

> [@Galadan](#):
>
> en effet, ça marche mieux ^^  
> Merci beaucoup 🙂

Bonjour,  
Pourrais tu partager ton code final des consommations 24 heures, semaine, mois ?

---

<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:** [Mai 1, 2021, 11:37 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/34 "2021-05-01T11:37:47Z")

</div>

Bonjour,

Avec plaisir!

```auto
type: entities
entities:
  - entity: sensor.adou_filtre_time
  - entity: sensor.daily_water
    state_header: Consommation
    secondary_info: last-changed
    name: Aujourd'hui
    icon: 'mdi:water'
    type: 'custom:multiple-entity-row'
    styles:
      width: 80px
      text-align: center
    entities:
      - entity: sensor.water_last_day
        styles:
          width: 80px
          text-align: center
      - entity: sensor.water_cost_daily
        name: Coût
        styles:
          width: 80px
          text-align: center
  - entity: sensor.weekly_water
    state_header: Consommation
    styles:
      width: 80px
      text-align: center
    secondary_info: last-changed
    name: Cette semaine
    icon: 'mdi:water'
    type: 'custom:multiple-entity-row'
    entities:
      - entity: sensor.water_last_week
        styles:
          width: 80px
          text-align: center
      - entity: sensor.water_cost_weekly
        name: Coût
        styles:
          width: 80px
          text-align: center
  - entity: sensor.monthly_water
    state_header: Consommation
    styles:
      width: 80px
      text-align: center
    secondary_info: last-changed
    name: Ce mois
    icon: 'mdi:water'
    type: 'custom:multiple-entity-row'
    entities:
      - entity: sensor.water_last_month
        styles:
          width: 80px
          text-align: center
      - entity: sensor.water_cost_monthly
        name: Coût
        styles:
          width: 80px
          text-align: center
  - entity: sensor.yearly_water
    state_header: Consommation
    styles:
      width: 80px
      text-align: center
    secondary_info: last-changed
    name: Cette année
    icon: 'mdi:water'
    type: 'custom:multiple-entity-row'
    entities:
      - entity: sensor.water_last_year
        styles:
          width: 80px
          text-align: center
      - entity: sensor.water_cost_yearly
        styles:
          width: 80px
          text-align: center
        name: Coût

```

Ce qu'il donne ça:

 ![image](https://forum.hacf.fr/uploads/default/original/2X/1/17a26d10f52f6104caab75898b5aa10bb911d28e.png)

---

<div class="post-metadata">

**Author:** ![Ives](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/i/ba8739/32.png) [@Ives](https://forum.hacf.fr/u/Ives)\
**Post date:** [Mai 1, 2021, 11:45 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/35 "2021-05-01T11:45:27Z")

</div>

Merci, c’est fonctionnel comme tableau de synthèse ; il a même une entrée pour mentionner la date du changement de filtre ; très bonne idée !

Moi j’ai un seul sensor compteur\_eau dont la valeur est incrémentée au fur et à mesure de la consommation et toi tu as plusieurs sensor semaine, mois année ; tu peux m’expliquer le principe ?

Tu n’utilises pas ApexCharts-Card pour afficher sous forme de courbe ?

---

<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:** [Mai 1, 2021, 11:56 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/36 "2021-05-01T11:56:32Z")

</div>

Ah oui autant pour moi, c'est la partie apex qui t'intéresse!!  
J'ai la même chose, un compteur qui incrémente tous les litres.  
Il faut que tu te penche sur les [Utility\_Meter](https://www.home-assistant.io/integrations/utility_meter/) pour avoir les données jour/semaine/mois/année.  
Pour la partie apex, j'ai ça:

```auto
type: 'custom:apexcharts-card'
graph_span: 15d
span:
  end: day
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.daily_water
    type: column
    group_by:
      func: diff
      duration: 24h
    show:
      datalabels: true

```

qui donne ceci:

 ![image](https://forum.hacf.fr/uploads/default/original/2X/2/22a4ff6edf1f5dd0569acbd9afb95d64d7c4bd85.jpeg)

---

<div class="post-metadata">

**Author:** ![Ives](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/i/ba8739/32.png) [@Ives](https://forum.hacf.fr/u/Ives)\
**Post date:** [Mai 1, 2021, 12:09 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/37 "2021-05-01T12:09:33Z")

</div>

Les deux m’intéressent !  
Avec apex j’ai pu faire pour la consommation horaire ; concernant la semaine (mois, année) je dois attendre les données…  
Je vais de nouveau explorer Utility\_meter car mon premier test n’a pas été concluant…  
Merci pour ces infos  
Encore un point ; j’ai installé multiple-entity-row avec HACS (en prévision de l’implantation du tableau récapitulatif) mais lorsque je souhaite ajouter une carte à mon Dashboard, il ne me la propose pas ?

---

<div class="post-metadata">

**Author:** ![geo](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/g/f4b2a3/32.png) [@geo](https://forum.hacf.fr/u/geo)\
**Post date:** [Mai 1, 2021, 1:27 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/38 "2021-05-01T13:27:30Z")

</div>

> Encore un point ; j’ai installé multiple-entity-row avec HACS (en prévision de l’implantation du tableau récapitulatif) mais lorsque je souhaite ajouter une carte à mon Dashboard, il ne me la propose pas ?

@Ives Si je ne dis pas de bêtise, la carte ‹&nbsp;multiple-entity-row&nbsp;› n’est en faite qu’une sous-carte a utiliser obligatoirement dans une carte ‹&nbsp;entities&nbsp;›, c’est pour ca qu’elle n’apparait pas dans la liste des cartes

---

<div class="post-metadata">

**Author:** ![Ives](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/i/ba8739/32.png) [@Ives](https://forum.hacf.fr/u/Ives)\
**Post date:** [Mai 2, 2021, 12:13 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/39 "2021-05-02T00:13:27Z")

</div>

J'ai modifié les paramètres pour afficher la consommation heure par heure durant 24 heures mais sur l'axe des abscisses je n'ai pas les heures de 0 à 24 heures mais de 0 à 18 h ?

```auto
type: 'custom:apexcharts-card'
graph_span: 24h
span:
  start: day
stacked: true
header:
  show: false
  title: Conso par heure
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(20,129,238)'
    entity: sensor.conso_eau_heure
    type: column
    group_by:
      func: diff
      duration: 1h
    show:
      datalabels: true

```

 ![compteur-eau3](https://forum.hacf.fr/uploads/default/original/2X/c/cf4ed4a84df5d3fcca8ae889db4cf3e2c7b6e655.jpeg)

Je suis arrivé à faire :

- l'affichage des consommations par heure sur la journée (24 valeurs sur l'axe des x)
- l'affichage des consommations par jour sur 15 jours

Je n'arrive pas à faire :

- la consommation pour une semaine (somme des consommations des 7 jours) sur 4 semaines ( 4 valeurs sur l'axe des x)
- la consommation pour un mois (somme des consommations des 30/31 jours) sur 1 an ( 12 valeurs sur l'axe des x)
- la consommation pour un an (somme des consommations des12 mois ) sur 5 ans ( 5 valeurs sur l'axe des x)

---

<div class="post-metadata">

**Author:** ![Ives](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/i/ba8739/32.png) [@Ives](https://forum.hacf.fr/u/Ives)\
**Post date:** [Mai 2, 2021, 10:15 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/40 "2021-05-02T10:15:15Z")

</div>

> [@Galadan](#):
>
> `sensor.water_last_day`

Bonjour,  
Comment fais-tu pour récupérer la valeur de sensor.water\_last\_day (ou last week, last month) ?

---

<div class="post-metadata">

**Author:** ![Ives](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/i/ba8739/32.png) [@Ives](https://forum.hacf.fr/u/Ives)\
**Post date:** [Mai 2, 2021, 11:16 UTC](https://forum.hacf.fr/t/carte-apexcharts-card/2686/41 "2021-05-02T23:16:40Z")

</div>

> [@geo](#):
>
> @Ives Si je ne dis pas de bêtise, la carte ‹&nbsp;multiple-entity-row&nbsp;› n’est en faite qu’une sous-carte a utiliser obligatoirement dans une carte ‹&nbsp;entities&nbsp;›, c’est pour ca qu’elle n’apparait pas dans la liste des cartes

C’est bien ça @geo. Merci.

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

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