ApexCharts card - A highly customizable graph card

Share your Projects! Dashboards & Frontend
1934

Hello,

I try to do a stacked chart, with some series “calculated” (with transform option).

#---------------------------------------------------------------
#                     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           
           
            
      yaxis:
        - min: 0
          max: ~7
      apex_config:
        chart:
          height: 600px

image
image512×702 78.6 KB

The problem is that the hass values (for exemple hass.states[‘sensor.ballon_ecs_puissance_du_jour’].state) are taken as constants, not values from the past. In this example, “Ballon” value is 0.1, but for the previous days it was 5:

image
image504×821 108 KB

Instead of creating new sensors, is there any solution directly in the card to get the correct “historical” values?

1 Like
1935

I have two entries using the same sensor just that the “stacked” one has some additional math in the data_generator, see below. 0.0175 + 0.305 + 0.45 are the “nätavgifter” values that are added on top of my monthly consumption. Also, don’t forget to set stacked: true

  - entity: sensor.nordpool_kwh_se3_sek_3_08_025
    yaxis_id: first
    time_delta: +30m
    name: Fasta avgifter
    data_generator: >
      var output =
      entity.attributes.raw_today.concat(entity.attributes.raw_tomorrow);
      return output.map((entry) => { return [new Date(entry.start),
      entry.value - entry.value + 0.0175 + 0.305 + 0.45]});
    color: rgb(85,75,55)
    type: column
    stroke_width: 0
    show:
      legend_value: false
      in_header: false
      in_chart: true
1 Like
1936

in other words, how to use a “serie” which is the sum (difference in my case), of 2 series, without creating a new sensor?

1937

That looks like a great setup! Would you mind sharing all of the code?

1938

Tack Björn! :slightly_smiling_face:
That was an easy way of getting what i wanted.

Screenshot_20221112-150352
Screenshot_20221112-150352971×646 200 KB

1 Like
1939

Of course, here’s the complete thing:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:stack-in-card
    mode: horizontal
    style: |
      ha-card  {
        margin: 0px -6px -22px -10px  !important;
        box-shadow: 0px 0px;
          }
    cards:
      - type: gauge
        entity: sensor.kr_spent_today_heltal
        needle: true
        severity:
          green: 1
          yellow: 150
          red: 300
        max: 450
        min: 1
        unit: kr
        name: Kostnad idag
      - type: gauge
        entity: sensor.total_power_heltal
        name: Näteffekt
        needle: true
        severity:
          green: 0
          yellow: 4000
          red: 8000
        min: 0
        max: 10000
      - type: gauge
        entity: sensor.energy_d_heltal
        name: Förbrukat idag
        needle: true
        severity:
          green: 0
          yellow: 50
          red: 100
        min: 0
        max: 150
        unit: kWh
  - type: custom:apexcharts-card
    config_templates: grid_chart
    stacked: true
    experimental:
      color_threshold: true
    header:
      show: true
      show_states: false
    graph_span: 48h
    span:
      start: day
    now:
      show: true
      color: rgb(220,150,0)
    series:
      - entity: sensor.nordpool_kwh_se3_sek_3_08_025
        yaxis_id: first
        time_delta: +30m
        name: Timpris el
        color: rgb(200,140,0)
        data_generator: >
          var output =
          entity.attributes.raw_today.concat(entity.attributes.raw_tomorrow);
          return output.map((entry) => { return [new Date(entry.start),
          entry.value]});
        type: column
        stroke_width: 0
        show:
          legend_value: false
          in_header: false
          in_chart: true
        color_threshold:
          - value: 0
            color: '#00B817'
            opacity: 1
          - value: 2
            color: rgb(200,140,0)
          - value: 4
            color: rgb(180,0,0)
          - value: 6
            color: rgb(255,0,0)
      - entity: sensor.nordpool_kwh_se3_sek_3_08_025
        yaxis_id: first
        time_delta: +30m
        name: Fasta avgifter
        data_generator: >
          var output =
          entity.attributes.raw_today.concat(entity.attributes.raw_tomorrow);
          return output.map((entry) => { return [new Date(entry.start),
          entry.value - entry.value + 0.0175 + 0.305 + 0.45]});
        color: rgb(85,75,55)
        type: column
        stroke_width: 0
        show:
          legend_value: false
          in_header: false
          in_chart: true
      - entity: sensor.energy_h
        curve: smooth
        yaxis_id: second
        color: rgb(215,170,40)
        name: Förbrukning
        type: line
        stroke_width: 0.75
        extend_to: end
        group_by:
          func: delta
          duration: 1h
    yaxis:
      - id: first
        min: 0
        max: 3
        apex_config:
          decimalsInFloat: 0
          forceNiceScale: true
          labels:
            style:
              fontSize: 10px
              fontWeight: normal
              colors: rgb(150,150,150)
            formatter: |
              EVAL:v => `${v.toFixed(0)} kr`
          fill:
            type: gradient
            gradient:
              shadeIntensity: 0.5
              inverseColors: true
              opacityFrom: 0.4
              opacityTo: 0
              stops:
                - 2
      - id: second
        min: 0
        max: 8
        opposite: true
        show: true
        apex_config:
          decimalsInFloat: 0
          forceNiceScale: true
          labels:
            style:
              fontSize: 8px
              fontWeight: normal
              colors: rgb(130,130,130)
            formatter: |
              EVAL:v => `${v.toFixed(0)} kWh`
    apex_config:
      legend:
        show: false
      plotOptions:
        bar:
          columnWidth: 90%
      chart:
        type: area
        height: 190
        offsetY: -10
        parentHeightOffset: -5
      xaxis:
        axisBorder:
          show: false
        axisTicks:
          show: true
        tooltip:
          enabled: false
        tickPlacement: between
        crosshairs:
          show: true
        labels:
          style:
            fontSize: 11px
            fontWeight: 1400
          offsetX: -1
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        double_tap_action:
          action: none
        content: 'idag: {{ states.sensor.timpris_avg_idag.state }}'
        tap_action:
          action: none
        hold_action:
          action: none
        style: |
          ha-card  {
            --text-color: rgb(var(--rgb-grey));
            margin: -10px 0px -5px 3px  !important;
            box-shadow: 0px 0px;
              }
      - type: template
        double_tap_action:
          action: none
        content: 'imorgon: {{ states.sensor.timpris_avg_imorgon.state }}'
        tap_action:
          action: none
        hold_action:
          action: none
        style: |
          ha-card  {
            --text-color: rgb(var(--rgb-blue-grey));
            margin: -10px 0px -5px -10px  !important;
            box-shadow: 0px 0px;
              }

And the template ‘grid_chart’ (put it in the “Raw configuration editor”) containing the cosmetics:

apexcharts_card_templates:
  grid_chart:
    show:
      loading: false
    header:
      show: true
      show_states: false
      colorize_states: true
    apex_config:
      yaxis:
        labels:
          show: true
          style:
            fontSize: 11px
            fontWeight: normal
            colors: rgb(150,150,150)
      xaxis:
        tooltip:
          enabled: false
        labels:
          show: true
          style:
            fontSize: 11px
            fontWeight: normal
            colors: rgb(150,150,150)
          offsetX: 0
          offsetY: -3
        axisTicks:
          show: true
          height: 3
          color: rgb(150,150,150)
        axisBorder:
          show: false
          color: rgb(70,70,70)
          height: 1
          width: 100%
          offsetX: 0
          offsetY: 0
        crosshairs:
          show: false
          width: 1
          position: back
          opacity: 100
      grid:
        show: true
        borderColor: rgb(60,60,60)
        strokeDashArray: 1
        xaxis:
          lines:
            show: false
        row:
          colors: rgb(60,60,60)
          opacity: 0.2
      tooltip:
        enabled: true
      legend:
        showForSingleSeries: true
        fontSize: 11px
        fontWeight: normal
        labels:
          colors: rgb(200,200,200)
        enabled: true
      chart:
        height: 340px
        zoom:
          enabled: true
        toolbar:
          show: false
          tools:
            zoom: true
            zoomin: true
            zoomout: true
        opacity: 0.5
    style: |
      div#header__title {
        color: rgb(200, 200, 200);
        font-size: 17px;
        font-weight: bold;
      }
2 Likes
1940

Thanks DrewXT,
Unfortunately I lost some stuff when I migrated to a New system. I barely used the frontend and automation mostly, alsof because heartrate didnt work for me anymore using the addon. I do stille have the steps page if youre interested in that.

1941

If it is just for the conversion, please see my example from kWh into Wh:

>   - entity: sensor.solar_total_daily_energy
>     name: Summe
>     type: column
>     color: lightgray
>     group_by:
>       func: max
>       duration: 1h
>     transform: return x *1000;
>     unit: Wh
1 Like
1942

o that easy :wink:

how I missed that… thank you very much!

          - entity: sensor.netto_verbruik
            yaxis_id: power
            transform: return x /1000;
            unit: kW
            type: line
            name: Verbruik
            color: rgb(0,93,136)
            group_by:
              func: max
            show:
              legend_value: true

makes it. such better, now need to format the line graph a bit, and have it not show the future…

Scherm­afbeelding 2022-11-13 om 14.17.25
Scherm­afbeelding 2022-11-13 om 14.17.25972×850 60.6 KB

1943

Has anyone else experienced this bug?

Hiding the grid makes the “now-label” behave wierdly and offsets the flag.
I’m using:

        apex_config: 
          legend:
            show: false
          grid:
            show: false

Screenshot 2022-11-13 at 21.04.52
Screenshot 2022-11-13 at 21.04.521696×1354 127 KB

1944

Not seen it but maybe a workaround could be to match the background color to the grid color?

1945

I’m using a gradient background irl so not an option unfortunately :confused:

1946

If you could share that, I’d appreciate it - thanks heaps :slight_smile:

1 Like
1947

It was group_by that causes this,…

With transform it could be don wath you want ?

If you want Two colors make two entity with stacked option

1 Like
1948

Hi all!
I’be been looking for an answer on a relatively simple graph plotting question, regarding my electricity hour meter data, in kWh, Home Assistant terms as total_increasing and willing to plot the average electricity consumption for period into graph together with some other values that I already have.
Problem: how to get the “values difference” from total_increasing sensor and get the period consumption to be displayed?
Eg; Hour n = x kWh
Hour n+1 = x+0.8kWh
Difference (to graph) = 0.8kWh
Essentially what I want to plot is the outside air temperature measured and then my average electricity consumption grouped by some high number of hours for trends, but I can’t seem to figure out right way to extract the period consumption from ever increasing value.
Have you guys got any example of how you have handled that?
Thanks!

1949

Hi guys,

i’m super new to apex charts and i love it! I have one question for a very simple chart to visualize my daily oil consumption.
Is it possible to remove the date on the bottom when i hover over the data in the chart?Screenshot 2022-11-14 131904

1950

Yes, this is what I’m using:

apex_config:
  tooltip:
    enabled: true
    x:
      format: hh:mm
    'y':
      show: true
1951

Hello

This might bee simple one but I have not found an answer here.
I have on my Graph a section:

color_threshold:
      - value: 0
        color: green
      - value: 11
        color: orange
      - value: 20
        color: red

Can values be read from HA Helpers? I’d like to set those color treshold values on other dashboard by input.box or slider.

Br Janne

1952

thanks for you reply. for some reason this is still not working for me.
here is my code:

graph_span: 1month
update_interval: 1d
span:
  start: month
header:
  show: true
  title: Täglicher Ölverbrauch
  floating: false
  standard_format: true
series:
  - entity: sensor.taglicher_olverbrauch
    type: column
    name: Verbrauch
    group_by:
      func: last
      duration: 1d
apex_config:
  tooltip:
    enabled: true
    x:
      format: dd MMMM
    'y':
      show: true
1953

My bad, adding this will fix it:

apex_config:
  xaxis:
    tooltip:
      enabled: false