Sure, here is the code
type: custom:apexcharts-card
header:
title: ''
show: true
show_states: true
colorize_states: false
graph_span: 12h
apex_config:
tooltip:
enabled: false
annotations:
position: back
yaxis:
- 'y': 10
strokeDashArray: 5
borderColor: '#962626'
borderWidth: 1
xaxis:
axisBorder:
show: false
labels:
style:
fontSize: 10px
fontFamily: Segoe UI Light
chart:
height: 175
grid:
show: false
borderColor: '#404040'
strokeDashArray: 10
position: back
legend:
show: false
dataLabels:
enabled: false
stroke:
width: 1
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0.8
inverseColors: false
opacityFrom: 0.5
opacityTo: 0
stops:
- 0
yaxis:
- min: 0
max: ~10
apex_config:
forceNiceScale: true
decimalsInFloat: 0
labels:
style:
fontSize: 10px
fontFamily: Segoe UI Light
series:
- entity: sensor.marbg_wind_speed
name: Vind
type: area
color: 3ca358
float_precision: 0
fill_raw: last
- entity: sensor.marbg_wind_speed_max
name: Vind max
type: area
curve: smooth
color: fc7703
fill_raw: last
show:
extremas: true
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0);
box-shadow: none;
margin: 28px 0px 38px 8px;
font-size: 15px;
font-family: 'Segoe UI Light";
text-align: center
}
div#header__title {
font-size: 20px;
font-weight: 300;
font-family: 'Segoe UI Light";
font-color: #ff0000
}