"color_threshold" + "type: line" broken in v1.7.0?

[mabahj]

Checklist

• I updated the card to the latest version available
• I cleared the cache of my browser
• I verified that I'm really running the lastest version in my browser console
• I checked if there is another issue opened with the same problem

Describe the bug
(Thank you very much for this very useful card!) The problem:

• "color_threshold" and "type: line" draws nothing in version 1.7.0. It worked before I updated to 1.7.0.
• "color_threshold" and "type: column" draws as expected in version 1.7.0

Version of the card
Version: 1.7.0

To Reproduce

These are the two configuration I used, fetched from the documentation example:

Broken:

type: 'custom:apexcharts-card'
experimental:
  color_threshold: true
series:
  - entity: sensor.fake_temperature
    type: line
    color_threshold:
      - value: -10
        color: blue
        opacity: 1
      - value: 0
        color: cyan
      - value: 15
        color: green
      - value: 25
        color: orange

Works:

type: 'custom:apexcharts-card'
experimental:
  color_threshold: true
series:
  - entity: sensor.fake_temperature
    type: column
    color_threshold:
      - value: -10
        color: blue
        opacity: 1
      - value: 0
        color: cyan
      - value: 15
        color: green
      - value: 25
        color: orange

Screenshot: Works:

Screenshot: Broken:

Expected behavior
The documentation used the above yaml to describe an example on how to use color_threshold (I only changed the entity). It worked on the previous version (1.6.x?).

Desktop (please complete the following information):

• Vivaldi 3.6.2165.36 (Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.151 Safari/537.36)
• Firefox 85.0.2 (Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:85.0) Gecko/20100101 Firefox/85.0)

Smartphone (please complete the following information):
N/A

Additional context
Add any other context about the problem here.

[LouiS22]

+1 on the "line", it's broken for me as well.

[RomRider]

Interesting, works well for me and I didn't update that part of the code. Let me check!

[LouiS22]

Either I have to remove color_threshold: true from experimental, or from the series, then it's ok (except no color threshold of course).

[RomRider]

Any javascript console errors showing up?

[LouiS22]

Now, that you mention this, yes:

ncaught (in promise) TypeError: Cannot read property 'length' of null
at Function.value (apexcharts-card.js:1)
at t.value (apexcharts-card.js:1)
at t.value (apexcharts-card.js:1)
at t.value (apexcharts-card.js:1)
at t.value (apexcharts-card.js:1)
at t.value (apexcharts-card.js:1)
at t.value (apexcharts-card.js:1)
at t.value (apexcharts-card.js:1)
at t.create (apexcharts-card.js:1)
at apexcharts-card.js:1

[sajikur]

Hi, with this code (with threshold option) every browser goes out of memory or it's impossible to load apex graph page

#         - type: custom:apexcharts-card
#           experimental:
#             color_threshold: true
#           graph_span: 72h
#           header:
#             title: Valori esterni
#             show: true
#             show_states: true
#             colorize_states: true
#           all_series_config:
#             stroke_width: 2
#             opacity: 0.3
#             type: area
#           series:
#             - entity: sensor.temperature
#               invert: false
#             #   color: blue
#               color_threshold:
#                 - value: -10
#                 # color can be a color name, rgb(r, g, b), '#0000ff' or var(--color-variable)
#                 # default is: the default color of the serie
#                   color: blue
#                 # optional opacity, value from 0 to 1.
#                 # only for line and area
#                 # Default is 1 for 'type: line' and 0.7 for `type: area`
#                   opacity: 1
#                 - value: 0
#                   color: cyan
#                 - value: 15
#                   color: green
#                 - value: 20
#                   color: orange

any idea to solve?

thanx

[RomRider]

@LouiS22, I've just released a new beta version which is an attempt to fix the issue, mind trying it please?

[LouiS22]

@LouiS22, I've just released a new beta version which is an attempt to fix the issue, mind trying it please?

Hello, unfortunately it's the same, and the above error message is still present in the javascript console.

[RomRider]

@LouiS22, can you please share your config? And the min and the max value of the sensor your are charting?
I can't reproduce.
@mabahj, I can't reproduce either with the latest beta (nor with 1.7.0).
In an attempt to do the same graph as you, this is what I've used to generate the data.

          - type: custom:apexcharts-card
            experimental:
              color_threshold: true
            series:
              - entity: sensor.temperature
                type: line
                color_threshold:
                  - value: -10
                    color: blue
                    opacity: 1
                  - value: 0
                    color: cyan
                  - value: 15
                    color: green
                  - value: 25
                    color: orange
                data_generator: |
                  let res = [];
                  let i = -6;
                  start = new Date(start.getTime() - 4 * 1000 * 60 * 60);
                  Array.from(Array(28).keys()).forEach((entry, index) => {
                    res.push([new Date(start.getTime() + index * 1000 * 60 * 60).getTime(), i]);
                    i += 2;
                    if (i >= 28) i = -15;
                  });
                  return res;

[LouiS22]

Sure, there you go:

type: 'custom:apexcharts-card'
experimental:
  color_threshold: true
graph_span: 12h
header:
  show: true
  show_states: true
  colorize_states: true
series:
  - entity: sensor.netatmo_netatmo_co2
    show:
      header_color_threshold: true
    curve: smooth
    color_threshold:
      - value: 300
        color: green
      - value: 700
        color: '#82ed82'
      - value: 1100
        color: '#e8e041'
      - value: 1600
        color: '#e88941'
      - value: 2100
        color: '#e84141'
now:
  show: true
  label: now
apex_config:
  chart:
    height: 250px

[RomRider]

Also min and max which are supposed to be displayed currently in the chart (you can disable thresholds to be able to see them)

[LouiS22]

Also min and max which are supposed to be displayed currently in the chart (you can disable thresholds to be able to see them)

400-1400.

[RomRider]

@LouiS22, does that work for you (also make sure you are running the latest version really and not a cached one, you can see the actual version in the console):

          - type: 'custom:apexcharts-card'
            experimental:
              color_threshold: true
            graph_span: 12h
            header:
              show: true
              show_states: true
              colorize_states: true
            series:
              - entity: sensor.netatmo_netatmo_co2
                show:
                  header_color_threshold: true
                curve: smooth
                color_threshold:
                  - value: 300
                    color: green
                  - value: 700
                    color: '#82ed82'
                  - value: 1100
                    color: '#e8e041'
                  - value: 1600
                    color: '#e88941'
                  - value: 2100
                    color: '#e84141'
                data_generator: |
                  let res = [];
                  let i = 400;
                  start = new Date(start.getTime() - 4 * 1000 * 60 * 60);
                  Array.from(Array(28).keys()).forEach((entry, index) => {
                    res.push([new Date(start.getTime() + index * 1000 * 60 * 60).getTime(), i]);
                    i += 200;
                    if (i >= 1401) i = 400;
                  });
                  return res;
            now:
              show: true
              label: now
            apex_config:
              chart:
                height: 250px

[LouiS22]

@LouiS22, does that work for you (also make sure you are running the latest version really and not a cached one, you can see the actual version in the console):

          - type: 'custom:apexcharts-card'
            experimental:
              color_threshold: true
            graph_span: 12h
            header:
              show: true
              show_states: true
              colorize_states: true
            series:
              - entity: sensor.netatmo_netatmo_co2
                show:
                  header_color_threshold: true
                curve: smooth
                color_threshold:
                  - value: 300
                    color: green
                  - value: 700
                    color: '#82ed82'
                  - value: 1100
                    color: '#e8e041'
                  - value: 1600
                    color: '#e88941'
                  - value: 2100
                    color: '#e84141'
                data_generator: |
                  let res = [];
                  let i = 400;
                  start = new Date(start.getTime() - 4 * 1000 * 60 * 60);
                  Array.from(Array(28).keys()).forEach((entry, index) => {
                    res.push([new Date(start.getTime() + index * 1000 * 60 * 60).getTime(), i]);
                    i += 200;
                    if (i >= 1401) i = 400;
                  });
                  return res;
            now:
              show: true
              label: now
            apex_config:
              chart:
                height: 250px

No, just endless circle :(

FYI: I'm using Chrome (not that it matters, but it's strange you can generate data).