apexcharts-card
apexcharts-card copied to clipboard
experimental: color_threshold makes Column series disappear from card.
Checklist
- [X] I updated the card to the latest version available
- [X] I cleared the cache of my browser
- [X] I verified that I'm really running the lastest version in my browser console
- [X] I checked if there is another issue opened with the same problem
Describe the bug Column graph series disappears from view, if they are placed after a color threshold using Line series in yaml. Issue is solved by moving the Column graph series above the color threshold series. Line series is not affected under the color threshold config. Two column series is not triggering the bug.
Version of the card Version: 2.1.2
To Reproduce This is the configuration I used:
type: custom:apexcharts-card
experimental:
color_threshold: true
header:
show: true
title: ApexCharts-Card
show_states: true
colorize_states: true
series:
- entity: sensor.sun_solar_elevation
data_generator: |
// REMOVE ME
const now = new Date();
const data = [];
for(let i = 0; i <= 24; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
}
return data.reverse();
color_threshold:
- value: 0
color: 00dd07
- value: 2
color: a2cc00
- value: 4
color: fff229
- value: 6
color: ffa74f
- value: 7
color: ec1802
- entity: sensor.sun_solar_azimuth
type: column
data_generator: |
// REMOVE ME
const now = new Date();
const data = [];
for(let i = 0; i <= 24; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
}
return data.reverse();
Solved by moving Column series above the line
type: custom:apexcharts-card
experimental:
color_threshold: true
header:
show: true
title: ApexCharts-Card
show_states: true
colorize_states: true
series:
- entity: sensor.sun_solar_azimuth
type: column
data_generator: |
// REMOVE ME
const now = new Date();
const data = [];
for(let i = 0; i <= 24; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
}
return data.reverse();
- entity: sensor.sun_solar_elevation
data_generator: |
// REMOVE ME
const now = new Date();
const data = [];
for(let i = 0; i <= 24; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
}
return data.reverse();
color_threshold:
- value: 0
color: 00dd07
- value: 2
color: a2cc00
- value: 4
color: fff229
- value: 6
color: ffa74f
- value: 7
color: ec1802
Screenshots
Expected behavior Column series would not disappear placed after the color threshold series.
Desktop (please complete the following information):
- Browser [Versio 1.67.123 Chromium: 126.0.6478.126]
- HomeAssistant 7.1 and 7.2 tested
Smartphone (please complete the following information):
- Device: Pixel 6a
- OS: Android 14
- Browser HA app 2024.6.1-full