Here is the code for the screenshot below as requested. You will have to replace my sensors with your own. And, also, you need to have mushroom, stack-in-card etc. installed.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
style: |
ha-card {
margin: 0px -6px -25px -10px !important;
box-shadow: 0px 0px;
}
cards:
- type: gauge
entity: sensor.sek_kwh
needle: true
segments:
- from: 0
color: rgb(0,180,0)
- from: 3
color: rgb(200,140,0)
- from: 5
color: rgb(180,0,0)
- from: 7
color: rgb(255,0,0)
max: 10
min: 1
unit: kr
name: Timpris
- type: gauge
entity: sensor.total_power_heltal
name: Näteffekt
needle: true
segments:
- from: 0
color: rgb(0,180,0)
- from: 3000
color: rgb(200,140,0)
- from: 5000
color: rgb(180,0,0)
- from: 7000
color: rgb(255,0,0)
min: 0
max: 10000
- type: gauge
entity: sensor.energy_d_heltal
name: Förbrukat idag
needle: true
segments:
- from: 0
color: rgb(0,180,0)
- from: 60
color: rgb(200,140,0)
- from: 90
color: rgb(180,0,0)
- from: 120
color: rgb(255,0,0)
min: 0
max: 150
unit: kWh
- type: custom:apexcharts-card
config_templates: grid_chart
stacked: true
experimental:
color_threshold: true
header:
show: true
show_states: false
graph_span: 48h
span:
start: day
now:
show: true
color: rgb(220,150,0)
series:
- entity: sensor.nordpool_kwh_se3_sek_3_08_025
yaxis_id: first
time_delta: +30m
name: Timpris el
color: rgb(180,120,0)
data_generator: >
var output =
entity.attributes.raw_today.concat(entity.attributes.raw_tomorrow);
return output.map((entry) => { return [new Date(entry.start),
entry.value]});
type: column
stroke_width: 0
show:
legend_value: false
in_header: false
in_chart: true
color_threshold:
- value: 0
color: '#009500'
opacity: 1
- value: 2
color: rgb(200,140,0)
- value: 4
color: rgb(180,0,0)
- value: 6
color: rgb(255,0,0)
- entity: sensor.nordpool_kwh_se3_sek_3_08_025
yaxis_id: first
time_delta: +30m
name: Fasta avgifter
data_generator: >
var output =
entity.attributes.raw_today.concat(entity.attributes.raw_tomorrow);
return output.map((entry) => { return [new Date(entry.start),
entry.value - entry.value + 0.0175 + 0.305 + 0.45]});
color: rgb(85,75,55)
type: column
stroke_width: 0
group_by:
func: max
duration: 1h
show:
legend_value: false
in_header: false
in_chart: true
- entity: sensor.energy_h
curve: stepline
yaxis_id: second
color: '#CF7524'
name: Förbrukning
type: line
stroke_width: 2
extend_to: false
group_by:
func: max
duration: 1h
yaxis:
- id: first
min: 0
max: 9
apex_config:
decimalsInFloat: 0
forceNiceScale: true
labels:
style:
fontSize: 9px
fontWeight: normal
colors: rgb(170,170,170)
formatter: |
EVAL:v => `${v.toFixed(0)} kr`
- id: second
min: 0
max: 8
opposite: true
show: true
apex_config:
decimalsInFloat: 0
forceNiceScale: true
labels:
style:
fontSize: 9px
fontWeight: normal
colors: rgb(215,170,40)
formatter: |
EVAL:v => `${v.toFixed(0)} kWh`
fill:
type: gradient
gradient:
shadeIntensity: 0.5
inverseColors: true
opacityFrom: 0.4
opacityTo: 0
stops:
- 2
apex_config:
legend:
show: false
plotOptions:
bar:
columnWidth: 90%
chart:
type: area
height: 180
offsetY: -10
parentHeightOffset: -5
xaxis:
axisBorder:
show: false
axisTicks:
show: true
tooltip:
enabled: false
tickPlacement: between
crosshairs:
show: true
labels:
style:
fontSize: 11px
fontWeight: 1400
offsetX: -1
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
content: 'idag: {{ states.sensor.timpris_avg_idag.state }}'
tap_action:
action: none
hold_action:
action: none
style: |
ha-card {
--text-color: rgb(var(--rgb-grey));
margin: -18px 0px -2px 3px !important;
box-shadow: 0px 0px;
}
- type: template
double_tap_action:
action: none
content: 'imorgon: {{ states.sensor.timpris_avg_imorgon.state }}'
tap_action:
action: none
hold_action:
action: none
style: |
ha-card {
--text-color: rgb(var(--rgb-blue-grey));
margin: -18px 0px -2px -10px !important;
box-shadow: 0px 0px;
}
- type: template
entity: sensor.electricity_cheapest_hours
icon: mdi:flash
icon_color: green
content: |-
{{ states("sensor.electricity_cheapest_hours") }}
card_mod:
style: |
ha-card {
--text-color: rgb(var(--rgb-green));
margin: -18px 0px -2px -10px !important;
box-shadow: 0px 0px;
}
.content {
white-space: pre-wrap;
}
- type: template
entity: sensor.electricity_cheapest_hours
icon: mdi:flash
icon_color: red
content: |-
{{ states("sensor.electricity_expensive_hours") }}
card_mod:
style: |
ha-card {
--text-color: rgb(var(--rgb-red));
margin: -18px 0px -2px -10px !important;
box-shadow: 0px 0px;
}
.content {
white-space: pre-wrap;
}
- type: custom:stack-in-card
mode: horizontal
style: |
ha-card {
margin: 0px 0px 0px 0px !important;
box-shadow: 0px 0px;
}
cards:
- type: custom:apexcharts-card
config_templates: grid_chart
experimental:
color_threshold: true
header:
show: false
show_states: false
graph_span: 12h
span:
end: hour
series:
- entity: sensor.sek_kwh_spent_h
yaxis_id: first
name: Denna timme
type: column
group_by:
func: max
duration: 1h
show:
datalabels: true
legend_value: false
in_header: false
in_chart: true
color: '#c0c0c0'
color_threshold:
- value: 0
color: green
opacity: 1
- value: 7.49
color: rgb(200,140,0)
- value: 14.49
color: rgb(170,0,0)
- value: 24.49
color: rgb(255,0,0)
yaxis:
- id: first
show: false
min: 0
max: 60
apex_config:
legend:
show: false
grid:
show: false
xaxis:
axisBorder:
show: false
axisTicks:
show: false
tooltip:
enabled: false
tickPlacement: between
crosshairs:
show: false
labels:
style:
fontSize: 9px
format: HH
hideOverlappingLabels: false
plotOptions:
bar:
columnWidth: 90%
dataLabels:
offsetY: -7
background:
opacity: 0.001
enabled: true
foreColor: rgb(110,110,110)
borderRadius: 0
borderWidth: 0
style:
fontSize: 8px
color: rgb(210,210,210)
fontWeight: 600
formatter: |
EVAL:v => `${v.toFixed(0)}`
chart:
height: 110
offsetY: -20
parentHeightOffset: -10
- type: custom:apexcharts-card
config_templates: grid_chart
experimental:
color_threshold: true
header:
show: false
show_states: false
colorize_states: true
graph_span: 8d
span:
end: day
series:
- entity: sensor.sek_kwh_spent_d
yaxis_id: first
type: column
group_by:
func: max
duration: 1d
show:
datalabels: true
legend_value: false
in_header: false
in_chart: true
color: '#c0c0c0'
color_threshold:
- value: 0
color: green
opacity: 1
- value: 7.49
color: rgb(200,140,0)
- value: 14.49
color: rgb(170,0,0)
- value: 24.49
color: rgb(255,0,0)
yaxis:
- id: first
show: false
min: 0
max: '|+200|'
apex_config:
xaxis:
axisBorder:
show: false
axisTicks:
show: false
tooltip:
enabled: false
tickPlacement: between
crosshairs:
show: false
labels:
style:
fontSize: 9px
datetimeFormatter:
day: D
format: ddd
hideOverlappingLabels: false
legend:
show: false
grid:
show: false
plotOptions:
bar:
columnWidth: 94%
dataLabels:
offsetY: -7
background:
opacity: 0.001
enabled: true
foreColor: rgb(110,110,110)
borderRadius: 0
borderWidth: 0
style:
fontSize: 8px
color: rgb(210,210,210)
fontWeight: 600
formatter: |
EVAL:v => `${v.toFixed(0)}`
chart:
height: 110
offsetY: -20
parentHeightOffset: -10
- type: custom:stack-in-card
mode: vertical
style: |
ha-card {
margin: -30px 0px 0px 0px !important;
box-shadow: 0px 0px;
}
cards:
- type: custom:apexcharts-card
config_templates: grid_chart
header:
show: false
show_states: false
graph_span: 10h
span:
end: hour
series:
- entity: sensor.energy_h
color: '#CF7524'
yaxis_id: first
name: Förbrukning
type: column
group_by:
func: max
duration: 1h
start_with_last: false
show:
datalabels: true
legend_value: true
in_chart: true
- entity: sensor.average_inside_temperature_current
yaxis_id: second
name: Inomhus
type: line
stroke_width: 1.2
color: rgb(220,80,80)
group_by:
func: avg
duration: 1h
- entity: sensor.temperature_2
yaxis_id: third
name: Utomhus
type: line
stroke_width: 1.2
color: rgb(80,150,230)
group_by:
func: avg
duration: 1h
yaxis:
- id: first
min: 0
max: 10
apex_config:
tickAmount: 7
decimalsInFloat: 0
forceNiceScale: true
labels:
style:
fontSize: 9px
fontWeight: normal
colors: '#CF7524'
- id: second
min: '|-0.5|'
max: '|+0.5|'
opposite: true
apex_config:
decimalsInFloat: 0
forceNiceScale: true
labels:
style:
fontSize: 9px
fontWeight: normal
colors: rgb(220,80,80)
- id: third
min: '|-1|'
max: '|+6|'
opposite: true
apex_config:
decimalsInFloat: 0
forceNiceScale: true
labels:
style:
fontSize: 9px
fontWeight: normal
colors: rgb(80,150,230)
apex_config:
legend:
show: true
grid:
show: false
plotOptions:
area:
fillTo: origin
chart:
height: 160
offsetY: -10
parentHeightOffset: -10
dataLabels:
offsetY: -8
background:
opacity: 0.01
enabled: true
foreColor: '#CF7524'
padding: 2
borderRadius: 4
borderWidth: 0
style:
fontSize: 10px
color: rgb(200,200,200)
formatter: |
EVAL:function(value) {
let v = value.toFixed(1) + "";
return v.replace('.',',');
}
tooltip:
enabled: true
xaxis:
axisBorder:
show: false
axisTicks:
show: true
tooltip:
enabled: false
tickPlacement: between
crosshairs:
show: false
labels:
style:
fontSize: 9px
datetimeFormatter:
day: HH
format: H:mm
hideOverlappingLabels: false
)
