Trying To Create SolarEdge Style Energy Card

Configuration Frontend
1

Hi,

I have been experimenting with setting up my SolarEdge inverter in Home Assistant to view the data in the energy dashboard. I am wanting to emulate the SolarEdge Production & Consumption graph, I have created three entities for solar production, consumption, and self-consumption.

image
image611×523 23.7 KB

I have created a Statistics Graph Card with these three values (sensor card times out):

type: statistics-graph
entities:
  - sensor.power_consumption
  - sensor.power_self_consumption
  - sensor.solaredge_ac_power
stat_types:
  - mean
chart_type: line

image

I was wondering how I can make this look like the graph above by filling in the area under the curve and ensuring the correct layering of data. I also want it to only show today not the last 24 hours.

Thanks

2

Hi,
This is my card energy.

image
image750×714 110 KB 

type: custom:apexcharts-card
header:
  title: Producción y consumo
  show: true
  show_states: true
  colorize_states: true
  standard_format: true
  disable_actions: true
apex_config:
  chart:
    height: 200
    tipe: area
  stroke:
    width: 2
    curve: smooth
  legend:
    show: false
graph_span: 24h
span:
  start: day
series:
  - entity: sensor.solaredge_i1_ac_power
    type: area
    extend_to: false
    name: Producción solar
    color: rgb(68,238,153)
    opacity: 1
    fill_raw: last
    show:
      extremas: max
  - entity: sensor.solar_house_consumption_w
    type: area
    extend_to: false
    name: Consumo
    color: rgb(254,96,96)
    opacity: 1
    fill_raw: last
  - entity: sensor.solar_panel_to_house_w
    type: area
    extend_to: false
    name: Autoconsumo
    color: rgb(102,153,254)
    opacity: 1
    fill_raw: last
3 Likes
3

Interesting! I’ll try to install apexcharts-card in HA Core first…

4

Based on the inspiration here I also created my SolarEdge-style energy card using apexcharts-card in HA Core:

2025-03-30 23_57_19-Overview – Home Assistant - Iron
2025-03-30 23_57_19-Overview – Home Assistant - Iron619×432 33.6 KB

I also added on line showing the energy content of my PowerWall 2. Here is the code:

type: custom:apexcharts-card
header:
  show: true
  show_states: true
  colorize_states: true
  standard_format: true
  disable_actions: true
apex_config:
  chart:
    height: 360
    type: area
  stroke:
    width: 2
    curve: smooth
  legend:
    show: false
graph_span: 24h
span:
  start: day
yaxis:
  - min: 0
    max: ~14
    decimals: 0
    apex_config:
      tickAmount: 7
series:
  - entity: sensor.wsh17_load_power
    type: area
    extend_to: false
    name: Home consumption
    color: rgb(254,96,96)
    opacity: 1
    fill_raw: last
    float_precision: 3
  - entity: sensor.wsh17_solar_power
    type: area
    extend_to: false
    name: Solar production
    color: rgb(68,238,153)
    opacity: 1
    fill_raw: last
    show:
      extremas: max
    float_precision: 3
  - entity: sensor.solar_own_consumption
    type: area
    extend_to: false
    name: ...from solar & PW2
    color: rgb(102,153,254)
    opacity: 1
    fill_raw: last
    float_precision: 3
  - entity: sensor.wsh17_tl22432600004k_battery_remaining
    type: line
    extend_to: false
    name: PW2 Energy
    color: rgb(0,0,139)
    opacity: 1
    fill_raw: last
    show:
      extremas: max
    float_precision: 3

The variable sensor.solar_own_consumption is a template helper with the following calculation: {{ float(states('sensor.wsh17_load_power')) - max(0,float(states('sensor.wsh17_site_power'))) }}

5

I updated the charts, here the diagrams and the code:

2025-04-03 18_41_46-Overview – Home Assistant - Iron
2025-04-03 18_41_46-Overview – Home Assistant - Iron494×372 29.3 KB

type: custom:apexcharts-card
header:
  show: true
  show_states: true
  colorize_states: true
  standard_format: true
  disable_actions: true
apex_config:
  chart:
    height: 300
    type: area
  stroke:
    width: 2
    curve: smooth
  legend:
    show: false
graph_span: 24h
yaxis:
  - id: left
    show: true
    min: 0
    max: ~10
    decimals: 0
    apex_config:
      tickAmount: 10
  - id: right
    show: true
    opposite: true
    min: 0
    max: 100
    decimals: 0
series:
  - entity: sensor.wsh17_solar_power
    type: area
    extend_to: false
    name: PV production
    color: rgb(154,221,174)
    opacity: 1
    fill_raw: last
    show:
      extremas: max
    float_precision: 3
    yaxis_id: left
  - entity: sensor.wsh17_load_power
    type: area
    extend_to: false
    name: Home consumption
    color: rgb(242,112,112)
    opacity: 1
    fill_raw: last
    float_precision: 3
    yaxis_id: left
  - entity: sensor.wsh17_load_from_own_power
    type: area
    extend_to: false
    name: ...from PV & PW2
    color: rgb(117,187,218)
    opacity: 1
    fill_raw: last
    float_precision: 3
    yaxis_id: left
  - entity: sensor.wsh17_load_from_battery_power
    type: area
    extend_to: false
    name: ...from PW2
    color: rgb(204,153,255)
    opacity: 1
    fill_raw: last
    float_precision: 3
    yaxis_id: left
  - entity: sensor.wsh17_charge
    type: line
    extend_to: now
    name: PW2 charge
    color: rgb(0,0,139)
    opacity: 1
    fill_raw: last
    float_precision: 3
    yaxis_id: right

2025-04-03 18_42_38-Overview – Home Assistant - Iron
2025-04-03 18_42_38-Overview – Home Assistant - Iron494×385 14.7 KB

type: custom:apexcharts-card
graph_span: 7d
span:
  start: day
  offset: '-6d'
apex_config:
  chart:
    height: 333
  legend:
    show: false
header:
  show_states: false
  colorize_states: true
  title: Energy stats per day for last seven days
  show: true
stacked: false
series:
  - entity: sensor.wsh17_load_import
    type: column
    name: Home consumption
    color: rgb(237,51,51)
    show:
      datalabels: true
    group_by:
      func: diff
      duration: 1d
  - entity: sensor.wsh17_solar_export
    type: column
    name: Solar production
    color: rgb(0,176,80)
    show:
      datalabels: true
    group_by:
      func: diff
      duration: 1d
  - entity: sensor.wsh17_load_from_own_energy
    type: column
    name: ...from solar & PW2
    color: rgb(103,190,255)
    show:
      datalabels: false
    group_by:
      func: diff
      duration: 1d

2025-04-03 18_42_59-Overview – Home Assistant - Iron
2025-04-03 18_42_59-Overview – Home Assistant - Iron494×372 12.6 KB

type: custom:apexcharts-card
chart_type: pie
graph_span: 24h
apex_config:
  chart:
    height: 333
  legend:
    show: false
header:
  show_states: true
  colorize_states: true
  title: Production last 24h
  show: true
series:
  - entity: sensor.wsh17_solar_export
    name: PV production
    color: rgb(0,176,80)
    group_by:
      func: diff
      duration: 24h
    show:
      in_chart: false
  - entity: sensor.wsh17_load_from_own_energy
    name: Eigenverbrauch
    type: column
    color: rgb(117,187,218)
    group_by:
      func: diff
      duration: 24h
    show:
      datalabels: percent
  - entity: sensor.wsh17_load_from_own_energy
    name: EV-Wert
    transform: return x * 0.2687
    color: rgb(117,187,218)
    group_by:
      func: diff
      duration: 24h
    show:
      in_chart: false
    unit: €
  - entity: sensor.wsh17_site_export
    name: Einspeisung
    type: column
    color: rgb(154,221,174)
    group_by:
      func: diff
      duration: 24h
    show:
      datalabels: percent
  - entity: sensor.wsh17_site_export
    name: Vergütung
    transform: return x * 0.0811
    color: rgb(154,221,174)
    group_by:
      func: diff
      duration: 24h
    show:
      in_chart: false
    unit: €

2025-04-03 18_43_11-Overview – Home Assistant - Iron
2025-04-03 18_43_11-Overview – Home Assistant - Iron494×372 12.6 KB

type: custom:apexcharts-card
chart_type: pie
graph_span: 24h
apex_config:
  chart:
    height: 333
  legend:
    show: false
header:
  show_states: true
  colorize_states: true
  title: Consumption last 24h
  show: true
series:
  - entity: sensor.wsh17_load_import
    name: Gesamtverbrauch
    type: column
    color: rgb(237,51,51)
    group_by:
      func: diff
      duration: 24h
    show:
      in_chart: false
  - entity: sensor.wsh17_site_import
    name: Zukauf kWh
    type: column
    color: rgb(241,92,92)
    group_by:
      func: diff
      duration: 24h
    show:
      datalabels: percent
  - entity: sensor.wsh17_site_import
    name: Zukauf Euro
    transform: return x * 0.2687
    color: rgb(241,92,92)
    group_by:
      func: diff
      duration: 24h
    show:
      in_chart: false
    unit: €
  - entity: sensor.wsh17_tl22432600004k_battery_import
    name: from PW2
    type: column
    color: rgb(204,153,255)
    group_by:
      func: diff
      duration: 24h
    show:
      datalabels: percent
  - entity: sensor.wsh17_load_from_solar_energy
    name: from PV
    color: rgb(117,187,218)
    group_by:
      func: diff
      duration: 24h
    show:
      datalabels: percent