Of course, here’s the complete thing:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
style: |
ha-card {
margin: 0px -6px -22px -10px !important;
box-shadow: 0px 0px;
}
cards:
- type: gauge
entity: sensor.kr_spent_today_heltal
needle: true
severity:
green: 1
yellow: 150
red: 300
max: 450
min: 1
unit: kr
name: Kostnad idag
- type: gauge
entity: sensor.total_power_heltal
name: Näteffekt
needle: true
severity:
green: 0
yellow: 4000
red: 8000
min: 0
max: 10000
- type: gauge
entity: sensor.energy_d_heltal
name: Förbrukat idag
needle: true
severity:
green: 0
yellow: 50
red: 100
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(200,140,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: '#00B817'
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
show:
legend_value: false
in_header: false
in_chart: true
- entity: sensor.energy_h
curve: smooth
yaxis_id: second
color: rgb(215,170,40)
name: Förbrukning
type: line
stroke_width: 0.75
extend_to: end
group_by:
func: delta
duration: 1h
yaxis:
- id: first
min: 0
max: 3
apex_config:
decimalsInFloat: 0
forceNiceScale: true
labels:
style:
fontSize: 10px
fontWeight: normal
colors: rgb(150,150,150)
formatter: |
EVAL:v => `${v.toFixed(0)} kr`
fill:
type: gradient
gradient:
shadeIntensity: 0.5
inverseColors: true
opacityFrom: 0.4
opacityTo: 0
stops:
- 2
- id: second
min: 0
max: 8
opposite: true
show: true
apex_config:
decimalsInFloat: 0
forceNiceScale: true
labels:
style:
fontSize: 8px
fontWeight: normal
colors: rgb(130,130,130)
formatter: |
EVAL:v => `${v.toFixed(0)} kWh`
apex_config:
legend:
show: false
plotOptions:
bar:
columnWidth: 90%
chart:
type: area
height: 190
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: -10px 0px -5px 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: -10px 0px -5px -10px !important;
box-shadow: 0px 0px;
}
And the template ‘grid_chart’ (put it in the “Raw configuration editor”) containing the cosmetics:
apexcharts_card_templates:
grid_chart:
show:
loading: false
header:
show: true
show_states: false
colorize_states: true
apex_config:
yaxis:
labels:
show: true
style:
fontSize: 11px
fontWeight: normal
colors: rgb(150,150,150)
xaxis:
tooltip:
enabled: false
labels:
show: true
style:
fontSize: 11px
fontWeight: normal
colors: rgb(150,150,150)
offsetX: 0
offsetY: -3
axisTicks:
show: true
height: 3
color: rgb(150,150,150)
axisBorder:
show: false
color: rgb(70,70,70)
height: 1
width: 100%
offsetX: 0
offsetY: 0
crosshairs:
show: false
width: 1
position: back
opacity: 100
grid:
show: true
borderColor: rgb(60,60,60)
strokeDashArray: 1
xaxis:
lines:
show: false
row:
colors: rgb(60,60,60)
opacity: 0.2
tooltip:
enabled: true
legend:
showForSingleSeries: true
fontSize: 11px
fontWeight: normal
labels:
colors: rgb(200,200,200)
enabled: true
chart:
height: 340px
zoom:
enabled: true
toolbar:
show: false
tools:
zoom: true
zoomin: true
zoomout: true
opacity: 0.5
style: |
div#header__title {
color: rgb(200, 200, 200);
font-size: 17px;
font-weight: bold;
}