TP-Link Kasa Smart Wi-Fi Plug with Energy Monitoring

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 :wink:

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.