I wanted to see my Power Consumption tougher with Electricity Price on a nice graphical representation.
For that I used Apxechard-Card: https://github.com/RomRider/apexcharts-card
I downloaded some code from Home Assistant forum and Facebook group and added some tweaks of my own.
The result is as shown on the image and the code can be downloaded here:
type: custom:apexcharts-card
header:
show: true
title: Power Usage Hourly vs Electricity Price
show_states: true
colorize_states: true
now:
show: true
label: Now
graph_span: 74h
span:
start: day
offset: '-25h'
apex_config:
xaxis:
labels:
format: ddd.MM
chart:
zoom:
enabled: true
toolbar:
show: true
tools:
zoom: true
zoomin: false
zoomout: false
pan: false
reset: true
tooltip:
fixed:
enabled: true
position: bottomLeft
yaxis:
- id: first
apex_config:
min: 0
opposite: true
forceNiceScale: true
decimalsInFloat: 2
labels:
show: true
- id: second
apex_config:
opposite: false
forceNiceScale: true
decimalsInFloat: 1
labels:
show: true
all_series_config:
stroke_width: 4
series:
- entity: sensor.nordpool_kwh_oslo_nok_3_10_025
yaxis_id: first
name: Yesterday
type: area
curve: stepline
extend_to_end: false
float_precision: 2
stroke_width: 2
opacity: 0.05
show:
in_header: false
legend_value: false
in_chart: true
color: '#00FF00'
- entity: sensor.nordpool_kwh_oslo_nok_3_10_025
yaxis_id: first
name: Today
type: area
curve: stepline
extend_to_end: false
float_precision: 2
stroke_width: 2
opacity: 0.5
show:
in_header: false
legend_value: false
color: '#0080FF'
data_generator: |
return entity.attributes.raw_today.map((p) => {
return [new Date(p.start), p.value];
});
- entity: sensor.nordpool_kwh_oslo_nok_3_10_025
yaxis_id: first
name: Tomorrow
type: area
curve: stepline
extend_to_end: false
float_precision: 2
stroke_width: 2
opacity: 0.2
show:
in_header: false
legend_value: false
extremas: true
color: '#FF7F00'
data_generator: |
return entity.attributes.raw_tomorrow.map((p) => {
return [new Date(p.start), p.value];
});
- entity: sensor.accumulated_consumption_current_house
yaxis_id: second
name: Power Usage
type: line
extend_to_end: false
float_precision: 2
stroke_width: 2
opacity: 1
color: '#FF0000'
show:
in_header: true
legend_value: false
group_by:
func: max
- entity: sensor.nordpool_kwh_oslo_nok_3_10_025
yaxis_id: first
name: Price Now
type: area
curve: stepline
extend_to_end: false
float_precision: 2
stroke_width: 0
opacity: 0.1
show:
in_header: true
legend_value: false
in_chart: true
color: '#0080FF'
Below is a Light Mode screenshot from my phone.
