Hello,
I’m having an issue with configuring my ApexCharts card. I want the chart to change its colors based on temperature values. Specifically, if both sensors show 60°C, the entire chart should be red. If one sensor shows 40°C and the other shows 60°C, I expect a color difference between the two values based on the color_threshold feature.
Unfortunately, the color threshold is not being applied at all with my current configuration. Has anyone encountered this issue or knows how to properly configure color thresholds for this scenario?
Thank you for your help!
type: custom:apexcharts-card
graph_span: 0.01m
header:
show: true
title: Pufferspeicher Temperatur
show_states: true
colorize_states: true
apex_config:
chart:
height: 300px
legend:
show: false
xaxis:
labels:
show: false
format: HH:mm
tooltip:
enabled: true
stroke:
width: 0
fill:
type: gradient
yaxis:
- id: first
decimals: 1
min: 0
max: auto
show: false
apex_config:
title:
text: Temperatur (°C)
tickAmount: 5
forceNiceScale: true
all_series_config:
type: area
show:
datalabels: false
curve: smooth
series:
- entity: sensor.pufferspeicher_temperature
yaxis_id: first
name: Oben
fill_raw: last
color: ""
color_threshold:
- value: 20
color: "#0000FF"
- value: 40
color: "#00BFFF"
- value: 50
color: "#FFFF00"
- value: 57
color: "#FF0000"
- entity: sensor.pufferspeicher_temperature_2
yaxis_id: first
name: Unten
fill_raw: last
color: ""
color_threshold:
- value: 20
color: "#0000FF"
- value: 40
color: "#00BFFF"
- value: 50
color: "#FFFF00"
- value: 60
color: "#FF0000"
experimental:
disable_config_validation: true
card_mod:
style: |
div#header__title {
font-size: 18px;
margin-top: 0.25rem;
margin-bottom: 0.5rem;
}
