"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).

[RomRider]

I'm also using chrome. It's hard for me to fix it since I can't reproduce those errors :(

[RomRider]

So @LouiS22, for your error, I think I found the issue, but it seems unrelated to color_threshold which is surprising 🤷‍♂️ I'll a fix soon.

[LouiS22]

So @LouiS22, for your error, I think I found the issue, but it seems unrelated to color_threshold which is surprising 🤷‍♂️ I'll a fix soon.

Many thanks for your effort! Let me know if you need anything else!

[mabahj]

So @LouiS22, for your error, I think I found the issue, but it seems unrelated to color_threshold which is surprising 🤷‍♂️ I'll a fix soon.

Wow! Things move fast here! Is that an upcoming fix for the problem I am seeing as well, the original bug report? Or would you still need some more info from me? (I downgraded to 1.6, but I can upgrade again if you want.)

[RomRider]

@mabahj it might be related yes, however, I'd still be interested in 2 things to validate that assumption:

• If you could test the latest beta where I attempted to fix one of the issue
• If you could provide the javascript console error log (if any) when the chart doesn't display (also on the latest beta)

[github-actions]

🎉 This issue has been resolved in version 1.7.1-dev.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[RomRider]

So I think I've figured out why it was breaking. If you both could give me feedback using the latest dev version that would help :) (make sure you are really running it by checking the JS console of your browser and not a cached version)

[LouiS22]

So I think I've figured out why it was breaking. If you both could give me feedback using the latest dev version that would help :) (make sure you are really running it by checking the JS console of your browser and not a cached version)

Hello! After upgrading it wasn't ok, but after a full browser cache delete helped me solve it, so now it seems ok!

[mabahj]

I updated to v1.7.1-dev.2 and it works here as well! Thank you very much!

I do, however, see a lot of errors in the console. I have no idea if they are related and a concern. Or, most probably, because I have a wrong configuration somewhere. The visuals works great, so I'm happy as it is!

I'll attach them here is they are related and/or have value:

[RomRider]

Don't worry about those. There's an issue for that but it's not a problem, see #17

Happy that it works again for you also!

[github-actions]

🎉 This issue has been resolved in version 1.7.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀