Energy Produced, Consumed, Battery Charge & Discharge, SoC

[luissimoes]

This graph is a "copy" (with small improvements) of what is found eg in Kostal Portal.

Perhaps is this interesting for somebody.

It shows the complete overview of what is produced, directly consumed, consumed from battery, consumed from Grid, how much is charged etc, at a given time.

Here a couple of pictures (I added one where we can also see the grid consumption, when the solar energy was not enough, the battery is at a minimum and we still needed energy at home)

Here is the code

type: custom:plotly-graph
entities:
  - entity: sensor.hostname_vulcan_pv_to_battery_power
    name: battery charge
    type: scatter
    mode: lines
    statistic: mean
    period: 5minute
    fill: tozeroy
    fillcolor: rgba(170,225,252,1)
    line:
      shape: spline
      color: '#AAE1FC'
      width: 0
  - entity: sensor.hostname_vulcan_home_power_from_pv
    name: direct consumption
    type: scatter
    mode: lines
    statistic: mean
    period: 5minute
    fillcolor: rgba(202,217,125,1)
    stackgroup: a
    line:
      shape: spline
      color: '#CAD97D'
      width: 0
  - entity: sensor.hostname_vulcan_home_power_from_battery
    name: battery discharge
    type: scatter
    mode: lines
    stackgroup: a
    statistic: mean
    period: 5minute
    fillcolor: rgba(108,155,196,1)
    line:
      shape: spline
      color: '#6C9BC4'
      width: 0
  - entity: sensor.hostname_vulcan_home_power_from_grid
    name: from grid
    type: scatter
    mode: lines
    statistic: mean
    period: 5minute
    fillcolor: rgba(238,122,6,1)
    stackgroup: a
    line:
      shape: spline
      color: '#EE7A06'
      width: 0
    filters:
      - filter: y>0
  - entity: sensor.hostname_vulcan_home_power
    name: home consumption
    type: scatter
    mode: lines
    statistic: mean
    period: 5minute
    line:
      shape: spline
      width: 1
      color: '#0C0B0B'
  - entity: sensor.hostname_vulcan_battery_soc
    name: battery SoC
    type: scatter
    mode: lines
    line:
      shape: spline
      width: 0.7
      color: '#7032FF'
card_mod:
  style: |
    ha-card {
        border-width: 0px;
       }
title: home power dashboard
layout:
  paper_bgcolor: rgba(0,0,0,0)
  plot_bgcolor: rgba(0,0,0,0)
  margin:
    t: 25
  height: 400
  xaxis:
    gridcolor: rgba(238,235,235,0.5)
    showgrid: false
    showspikes: true
    linecolor: '#fff'
    spikethickness: 2
    spikedash: dot
    spikecolor: '#999999'
    spikemode: across
  yaxis:
    showgrid: true
    gridcolor: rgba(238,235,235,0.6)
    linecolor: null
    title:
      font:
        size: 11
        color: '#FF8206'
      text: W
    tickfont:
      size: 10
      color: '#FF8206'
    side: left
  yaxis2:
    showgrid: false
    gridcolor: rgba(238,235,235,0.6)
    linecolor: null
    linewidth: 0
    title:
      font:
        size: 8
        color: '#7032FF'
      text: '%'
    tickfont:
      size: 8
      color: '#7032FF'
    side: right
hours_to_show: 12
refresh_interval: 600
view_layout:
  grid-area: view2
  place-items: center
  place-content: center
  align-items: center
background: '#fff'