apexcharts-card icon indicating copy to clipboard operation
apexcharts-card copied to clipboard

experimental: color_threshold makes Column series disappear from card.

Open antsalm opened this issue 7 months ago • 0 comments

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 image

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

antsalm avatar Jul 10 '24 11:07 antsalm