Der nachstehende Code betrifft die unterste Grafik, diese soll zusätzlich transparent dargestellt werden, hat hier jemand Erfahrung warum in diesem Fall diese nicht greift?
Dies nutze ich normalerweise für die Transparenz, was an alles anderen Karten auch greift nur in der unteren Karte nicht, verstehe aktuell nicht warum...
Hier die Ansicht dazu.
Dies nutze ich normalerweise für die Transparenz, was an alles anderen Karten auch greift nur in der unteren Karte nicht, verstehe aktuell nicht warum...
YAML:
style: |
ha-card {
opacity: 80%
}
YAML:
type: custom:apexcharts-card
style: |
ha-card {
opacity: 80%
}
header:
show: true
show_states: true
graph_span: 14d
series:
- entity: sensor.signify_netherlands_b_v_sml004_temperature_2
- entity: sensor.signify_netherlands_b_v_sml004_temperature
type: column
group_by:
duration: 1d
func: max
yaxis:
- id: main
min: 0
align_to: 50
apex_config:
axisTicks:
show: true
width: 54
offsetX: -6
borderType: dotted
color: rgba(var(--rgb-primary-text-color),.25)
labels:
offsetX: 8
align: right
style:
fontSize: var(--h6-font-size)
fontFamily: var(--font-stack)
apex_config:
grid:
borderColor: rgba(var(--rgb-primary-text-color),.25)
strokeDashArray:
- 1
- 1
plotOptions:
bar:
columnWidth: 16%
xaxis:
axisBorder:
color: rgba(var(--rgb-primary-text-color),.25)
offsetY: -1
axisTicks:
color: rgba(var(--rgb-primary-text-color),.25)
labels:
hideOverlappingLabels: false
style:
fontSize: var(--h6-font-size)
fontFamily: var(--font-stack)
datetimeFormatter:
month: MMM
day: d
xformatter: |
EVAL:function(value, timestamp) {
return moment(timestamp).format("dd").charAt(0) + "\n" + moment(timestamp).format("D")
}
card_mod:
style: >
#graph { margin: -8px; } #states__state { flex-direction: column-reverse;
display: flex;} #state__name { font-size: var(--body-font-size) !important;
font-weight: normal !important; padding: 4px 0 12px; } #state__value >
#state { font-size: var(--h1-font-size) !important; font-weight: 100
!important; padding-right: 4px;} #state__value > #uom { font-size:
var(--h6-font-size) !important; font-weight: 500 !important; text-transform:
uppercase; }
Hier die Ansicht dazu.