The graph part uses the mini-graph-card custom component installed in HACS … so if you haven’t already, install the wonderful (but unofficial) HACS integration (see this Home Assistant community thread
I should say firstly that I had previously copied/pasted/adapted the following into my configuration.yaml file as part of setting my HS110 switches to report energy usage.
# Extracting Energy Sensor data from the TP-Link HS-110 units
# Note: Hassio has picked up the friendly name from the Kasa phone app (where it is easy to change)
# Note: the HS110 or KP115 is a "switch" device, but we are both formatting the attributes and presenting them as sensors
#
sensor tp-link_switch1:
- platform: template
sensors:
hs110_amps:
friendly_name_template: "{{ state_attr('switch.HS110','friendly_name') }} Current"
value_template: "{{ state_attr('switch.HS110','current_a') | float }}"
unit_of_measurement: "A"
hs110_watts:
friendly_name_template: "{{ state_attr('switch.HS110','friendly_name') }} Current Consumption"
value_template: "{{ state_attr('switch.HS110','current_power_w') | float }}"
unit_of_measurement: "W"
hs110_total_kwh:
friendly_name_template: "{{ state_attr('switch.HS110','friendly_name') }} Total Consumption"
value_template: "{{ state_attr('switch.HS110','total_energy_kwh') | float }}"
unit_of_measurement: "kWh"
hs110_volts:
friendly_name_template: "{{ state_attr('switch.HS110','friendly_name') }} Voltage"
value_template: "{{ state_attr('switch.HS110','voltage') | float }}"
unit_of_measurement: "V"
hs110_today_kwh:
friendly_name_template: "{{ state_attr('switch.HS110','friendly_name') }} Today's Consumption"
value_template: "{{ state_attr('switch.HS110','today_energy_kwh') | float }}"
unit_of_measurement: "kWh"
sensor tp_link_switch2:
- platform: template
sensors:
fridge_amps:
friendly_name_template: "{{ state_attr('switch.fridge','friendly_name') }} Current"
value_template: "{{ state_attr('switch.fridge','current_a') | float }}"
unit_of_measurement: "A"
fridge_watts:
friendly_name_template: "{{ state_attr('switch.fridge','friendly_name') }} Current Consumption"
value_template: "{{ state_attr('switch.fridge','current_power_w') | float }}"
unit_of_measurement: "W"
fridge_total_kwh:
friendly_name_template: "{{ state_attr('switch.fridge','friendly_name') }} Total Consumption"
value_template: "{{ state_attr('switch.fridge','total_energy_kwh') | float }}"
unit_of_measurement: "kWh"
fridge_volts:
friendly_name_template: "{{ state_attr('switch.fridge','friendly_name') }} Voltage"
value_template: "{{ state_attr('switch.fridge','voltage') | float }}"
unit_of_measurement: "V"
fridge_today_kwh:
friendly_name_template: "{{ state_attr('switch.fridge','friendly_name') }} Today's Consumption"
value_template: "{{ state_attr('switch.fridge','today_energy_kwh') | float }}"
unit_of_measurement: "kWh"
… and so on for my other switches. I started off giving all switches long meaningful names, but they got unweildy so I have permanently allocated switches to my chest freezer (down in the garage) and fridge and re-installed them with shorter names.
When HACS is installed, you can go to the HACS tab in Home Assistant and select “Frontend”. Now locate the “mini-graph-card”. Clicking [INFORMATION] or the card’s name will open a documentation page, so you can get an idea about the card before installing it. You will want to come back to this information to try out the many many options
Install mini-graph-card and reload.
In the Home Assistant > Overview tab (aka lovelace), edit dashboard, [+ Add card], and (at the bottom of the list of card types) you should select the “Custom: Mini Graph Card” entry. If the Card Configuration pop-up window isn’t giving you any options, click on [Show Code editor] to see
1| type: custom:mini-graph-card
2|
where you can start entering the configuration options.
I spent quite a while trying out some of the many options provided by this card … and ended up with my lovelace card configuration being:
type: custom:mini-graph-card
icon: mdi:server
title: Energy Consumption
line_width: 1
smoothing: false
points_per_hour: 10
entities:
- sensor.hs110_watts
- sensor.kp115_watts
- sensor.fridge_watts
- sensor.chestfreezer_watts
show:
icon: false
name: false
state: false
labels: true
Try moving your cursor over the different sensor labels, clicking a sensor label, then clicking the title of the pop-up window to expand it.