Apexcharts-card - configuration

[Spl4sh]

Bonjour,

J’ai un petit problème de date sur le graphe de relevé d’électricité (gentiment piqué à @herveaurel , encore merci à lui) : les dates en dessous ne sont pas correct.

En gros, la barre au dessus de « sam 10 » correspond au dimanche 11 mai, et non au samedi 10. C’est idem pour toutes les autres dates. Et la barre tout à droite est bien ok, c’est la consommation actuelle : lundi 12 mai.

Voilà le code actuel :

type: custom:apexcharts-card
graph_span: 6d
span:
  end: day
  offset: "-1d"
experimental:
  color_threshold: true
apex_config:
  chart:
    stacked: true
    height: 200
  legend:
    show: false
  grid:
    show: true
    strokeDashArray: 0
    position: back
    borderColor: rgba(200,200,200,0.3)
  stroke:
    width: 1
  xaxis:
    labels:
      format: ddd dd
      hideOverlappingLabels: true
      showDuplicatges: true
  dataLabels:
    offsetY: -5
    background:
      enabled: true
      opacity: 0.5
  plotOptions:
    bar:
      borderRadius: 5
      dataLabels:
        position: top
  yaxis:
    - id: first
      decimals: 1
      min: 0
      forceNiceScale: true
      apex_config:
        tickAmount: 2
    - id: second
      decimals: 0
      max: 15
      min: 0
      forceNiceScale: false
      apex_config:
        tickAmount: 2
      opposite: true
      labels:
        show: false
header:
  show: true
  show_states: true
  standard_format: false
  colorize_states: true
series:
  - entity: sensor.today_hc_hp_meter
    yaxis_id: first
    type: column
    offset: +1d
    show:
      name_in_header: false
      datalabels: true
      legend_value: false
      header_color_threshold: true
    group_by:
      func: max
      duration: 1d
    opacity: 0.8
    color_threshold:
      - value: 0
        color: rgb(144, 191, 255)
      - value: 9
        color: rgb(206, 245, 149)
      - value: 12
        color: rgb(255, 218, 120)
      - value: 15
        color: rgb(255, 145, 138)
      - value: 18
        color: rgb(239, 177, 255)
  - entity: sensor.cout_actuel_edf
    yaxis_id: second
    type: line
    offset: +1d
    color: teal
    unit: €
    stroke_width: 2
    show:
      datalabels: true
      name_in_header: false
    group_by:
      func: last
      duration: 1d
    opacity: 0.8
card_mod:
  style: |
    ha-card {
      padding-top: 10px;
    }

Si quelqu’un à une solution, merci d’avance

[Jeffodilo]

Sans trop analyser, je dirais que le offset « -1d » => moins 1 jour, est la cause du décalage
A tester en retirant l’offset

[Spl4sh]

Si je le retire, j’ai un « trou » sur la droite, et j’ai toujours un décalage car nous sommes le lundi 12 et non le dimanche 11 :

Merci pour ton aide en tout cas.

[Sylv_01]

Hello, au début de la config tu as un offset « -1d », alors que dans tes 2 séries tu as un offset de « +1d », ça ne serait pas ça le soucis ?

[Spl4sh]

Si je mets du -1 partout, j’ai ça :

et du +1 partout j’ai ça :

[Jeffodilo]

Et sans l’offset dans les séries mais avec ceci

  - type: custom:apexcharts-card
    graph_span: 7d1
    stacked: true
    span:
      end: day

[Spl4sh]

c’est exactement ça, merci beaucoup !!!

[Sylv_01]

Du coup tu peux mettre un screenshot de ta carte à présent ?
Je vais sans doute te piquer le code du coup !

[Spl4sh]

Voilà la carte complète. J’utilise le thème rounded et la carte viens du github de herveraurel.

Son code :

type: vertical-stack
cards:
  - type: heading
    heading: Relevés
    heading_style: title
    icon: mdi:chart-bar
    badges: []
    card_mod:
      style: |
        .content {
          font-size: 16px !important;
          font-weight: bold !important;
        }
  - type: custom:apexcharts-card
    graph_span: 7d1
    span:
      end: day
    experimental:
      color_threshold: true
    apex_config:
      chart:
        stacked: true
        height: 200
      legend:
        show: false
      grid:
        show: true
        strokeDashArray: 0
        position: back
        borderColor: rgba(200,200,200,0.3)
      stroke:
        width: 1
      xaxis:
        labels:
          format: ddd dd
          hideOverlappingLabels: true
          showDuplicatges: true
      dataLabels:
        offsetY: -5
        background:
          enabled: true
          opacity: 0.5
      plotOptions:
        bar:
          borderRadius: 5
          dataLabels:
            position: top
      yaxis:
        - id: first
          decimals: 1
          min: 0
          forceNiceScale: true
          apex_config:
            tickAmount: 2
        - id: second
          decimals: 0
          max: 15
          min: 0
          forceNiceScale: false
          apex_config:
            tickAmount: 2
          opposite: true
          labels:
            show: false
    header:
      show: true
      show_states: true
      standard_format: false
      colorize_states: true
    series:
      - entity: sensor.today_hc_hp_meter
        yaxis_id: first
        type: column
        show:
          name_in_header: false
          datalabels: true
          legend_value: false
          header_color_threshold: true
        group_by:
          func: max
          duration: 1d
        opacity: 0.8
        color_threshold:
          - value: 0
            color: rgb(144, 191, 255)
          - value: 9
            color: rgb(206, 245, 149)
          - value: 12
            color: rgb(255, 218, 120)
          - value: 15
            color: rgb(255, 145, 138)
          - value: 18
            color: rgb(239, 177, 255)
      - entity: sensor.cout_actuel_edf
        yaxis_id: second
        type: line
        color: teal
        unit: €
        stroke_width: 2
        show:
          datalabels: true
          name_in_header: false
        group_by:
          func: last
          duration: 1d
        opacity: 0.8
    card_mod:
      style: |
        ha-card {
          padding-top: 10px;
        }

[Sylv_01]

Hello, génial merci !
Oui j’avais déjà récupéré la carte Apexcharts-card, mais beaucoup de difficultés à la paramétrer pour obtenir finalement ce que tu as réussi à faire, merci beaucoup !