I wonder if there is a way to configure the transparency of a graph area - especially for the Apexcharts-Card? Some themes make the whole widget transparent, but I haven’t seen a way to configure this only for the graph area itself.
Why: I the whole widget is transparent, the background colors aren’t shown very well.
Set opacity: to less than 1 for the apexchart element you are using.
But which element am I using?
Haven’t seen an explicit graph area element; where would I put that opacity: 0.9
I have no idea, you haven’t shared your card config.
Thought it would be a generic answer…
type: custom:apexcharts-card
graph_span: 28d
span:
end: day
header:
show: true
title: 7-Tage Hospitalisierung [28d]
show_states: false
apex_config:
annotations:
yaxis:
- 'y': 0
y2: 3
fillColor: green
- 'y': 3
y2: 6
fillColor: yellow
- 'y': 6
y2: 9
fillColor: red
- 'y': 9
y2: 99
fillColor: violet
series:
- entity: sensor.rki_covid_germany_hospitalization
color: red
name: Deutschland
- entity: sensor.rki_covid_nrw_hospitalization
color: lightblue
name: NRW
all_series_config:
extend_to_end: false
curve: stepline
group_by:
func: last
duration: 1d
Lucky for you annotations support opacity https://apexcharts.com/docs/options/annotations/
apex_config:
annotations:
yaxis:
- 'y': 0
y2: 3
fillColor: green
opacity: 0.9
- 'y': 3
y2: 6
fillColor: yellow
opacity: 0.9
- 'y': 6
y2: 9
fillColor: red
opacity: 0.9
- 'y': 9
y2: 99
fillColor: violet
opacity: 0.9