ApexCharts card - A highly customizable graph card

Sorry for the terrible drawing, but does anyone know if it is possible to add a static cost on top of the electricity price as per below (blue bar). I would like to add 0.8 on top of the electricity price that represents the fixed cost. Does anyone have an example of an idea on how to do so?

Do you mean something like this:

image

3 Likes

Yes, exactly! Looks great!
Would you mind sharing how you get the Nätavgift in there?

1 Like

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

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:

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

1 Like

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

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

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

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

1 Like

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

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.

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

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…

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  

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

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

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

1 Like

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

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!

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

Yes, this is what I’m using:

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