Visualizing Your Solar Savings: Tracking Electricity Costs on Home Assistant with Plotly
For a long time I have wanted a graph to show our daily electricity costs on our Home Assistant Dashboard. The main issue was showing the export savings. I also want to use Plotly. Plotly has a steep learning curve. With a bit of help from Claude I managed to get it working.
To get this to work you will need the below. Of course you can substitute the entities in the YAML below with your own:
I also used the following site to help with the shading of the columns
Before we get started a couple of things to note. You will need to make a Utility Meter for the export. Also the graph will only calculate for the number of days you have historical data for. The graph below shows 10 days. When you add yours set it to two days. It will then start working the next day. Then as the days pass, extend it out.
Daily Electricity Cost Graph
First things first lets make the Utility Meter
Go to Settings, Devices and Services, Helpers
In the bottom right hand corner you will see Create Helper
Search for Utility Meter. Below are the settings I used
Name
Daily Export Utility Meter
Find the Current Total Export Electricity sensor from the Octopus Energy Integration
Meter Reset Cycle
Daily
Click Submit
Create Utility Meter - Daily Export Utility Meter
If you then go back into the Utility Meter, it should look like this
Created Utility Meter
Click on Utility Meter options. It should look like this
Utility Meter Options
Now will need to make the Plotly graph. Below is the YAML. You will need to replace the entities with your own. You should now be all set. Don’t forget about the number of days, it is set in this line
hours_to_show: 10d
type: custom:plotly-graph
entities:
- entity: sensor.daily_export_utility_meter
unit_of_measurement: GBP
filters:
- map_y: >-
parseFloat(y) *
parseFloat(hass.states['sensor.electricity_21_80_export_current_rate'].state)
- filter: i > 0
- store_var: exportYs
name: |
$ex "Export" + " (£" + parseFloat(ys.at(-1)).toFixed(2) + ")"
marker:
color: |-
$ex ys.map(y => {
let value = parseFloat(y);
if (y == null || isNaN(value)) return "grey";
return value > 1.5 ? "#44A047" :
value > 1.2 ? "#5EA73E" :
value > 1.0 ? "#79AF35" :
value > 0.9 ? "#AEBF23" :
value > 0.8 ? "#C8C71A" :
value > 0.7 ? "#E3CF11" :
value > 0.6 ? "#FED709" :
value > 0.5 ? "#FEB912" :
value > 0.4 ? "#FE9C1C" :
value > 0.3 ? "#FE7F26" :
value > 0.2 ? "#FE6230" :
value > 0.1 ? "#FF453A" :
value > 0.05 ? "#FF453A" : "#FF2D1F"
})
hovertemplate: "%{x}<br>£%{y:.2f}<extra>Net</extra>"
statistic: state
period: day
type: bar
- entity: >-
sensor.octopus_energy_electricity_21_79_current_accumulative_cost
name: |
$ex "Cost" + " (£" + parseFloat(ys.at(-1)).toFixed(2) + ")"
statistic: state
period: day
type: bar
filters:
- filter: i > 0
marker:
color: |-
$ex ys.map(y => {
let value = parseFloat(y.toFixed(2));
return value > 5 ? "#FF453A" :
value > 4 ? "#FE8E21" :
value > 3 ? "#FED709" :
value > 2 ? "#C0C41D" :
value > 1 ? "#82B232" : "#44A047";
})
- entity: >-
sensor.octopus_energy_electricity_21_79_current_accumulative_cost
statistic: state
period: day
type: bar
filters:
- filter: i > 0
- map_y: parseFloat(y) - (parseFloat(vars.exportYs.ys[i]) || 0)
name: |
$ex "Net" + " (£" + parseFloat(ys.at(-1)).toFixed(2) + ")"
hovertemplate: "%{x}<br>£%{y:.2f}<extra>Net</extra>"
marker:
color: |-
$ex ys.map(y => {
let value = parseFloat(y);
if (y == null || isNaN(value)) return "grey";
return value > 5 ? "#FF453A" :
value > 4 ? "#FE692D" :
value > 3 ? "#FE8E21" :
value > 2.5 ? "#FEB215" :
value > 2 ? "#FED709" :
value > 1.5 ? "#D8CC15" :
value > 1 ? "#B3C121" :
value > 0.5 ? "#8EB62E" : "#44A047";
})
hours_to_show: 10d
refresh_interval: 30
title: Energy Cost
config:
scrollZoom: false
