Apexchart breaks linecharts when data has NULL values

[Fusseldieb]

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
Apexchart breaks linecharts sometimes when null values are used

Version of the card
Version: v1.10.0-dev.2

To Reproduce
When a data with null or undefined values are used

Screenshots

Expected behavior
I have read somewhere in an issue that this the issue of ApexChart itself, however, maybe something can be done on this side to help mitigate this issue. Maybe completely ignore those points, instead of reading them.

Desktop (please complete the following information):

• Chrome x64
• Version 91.0.4472.124

Additional context
-

[RomRider]

You can use fill_raw: last to fix this already :)

[Fusseldieb]

You can use fill_raw: last to fix this already :)

I'm already using that, doesn't seem to fix it. Sometimes it is entire and sometimes it breaks.

[RomRider]

Please share your config :)

[Fusseldieb]

Oh, of course! ahaha

type: custom:apexcharts-card
update_interval: 1min
graph_span: 24h
header:
  show: true
  title: Temp. piscina
  standard_format: true
  show_states: true
experimental:
  color_threshold: true
apex_config:
  xaxis:
    tooltip:
      enabled: false
yaxis:
  - id: first
    apex_config:
      tickAmount: 4
      decimalsInFloat: 1
  - id: second
    opposite: true
    apex_config:
      labels:
        show: false
      tickAmount: 1
      decimalsInFloat: 0
series:
  - entity: sensor.temperatura_piscina
    fill_raw: last
    type: line
    stroke_width: 4
    name: Hoje
    color_threshold:
      - value: 24
        color: blue
      - value: 27
        color: yellow
      - value: 35
        color: red
    group_by:
      duration: 15min
      func: avg
    show:
      extremas: true
    yaxis_id: first
  - entity: sensor.temperatura_piscina
    fill_raw: last
    offset: '-1d'
    type: line
    stroke_width: 4
    name: Ontem
    group_by:
      duration: 15min
      func: avg
    color: '#888888'
    show:
      extremas: true
    yaxis_id: first
    opacity: 0.4
  - entity: switch.sonoff_4ch_relay_1
    transform: 'return x === ''on'' ? 1 : 0;'
    yaxis_id: second
    curve: stepline
    opacity: 0.3
    stroke_width: 0
    color: '#888888'
    show:
      in_header: false
      name_in_header: false
      legend_value: false
    type: area

[RomRider]

I have seen the same happening only with color_threshold enabled which you have and for now I can't figure it out... Will look further.

[github-actions]

🎉 This issue has been resolved in version 1.10.0-dev.5 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[RomRider]

Please let me know if it works better now :)

[Fusseldieb]

Wow, that's dedication right there ahahah

Have reloaded it multiple times so far and played around with multiple offset-days, and it seems that the issue is gone :)

(However, it seems that the extremas: true might have gone, too... In post #177 (comment) they were still there. The code hasn't changed, I only changed the offset)

[RomRider]

I'll check the extremas thing 😅 sorry

[github-actions]

🎉 This issue has been resolved in version 1.10.0-dev.6 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 1.10.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[JanDetrez]

This is still an issue when graph is set to "area"

Thanks for your great plugin!

[rb0135]

I have version 2.0.4 and still have the same issue mentioned above with a Line Chart.

I do have data (not always nulls) but the data isnt exactly at 15 mins interval. I am wondering (havent had time to play yet) if the missing line drawn is because I have this in the Series values:

group_by: func: last duration: 15m

EDIT Tried removing above, made a bit of difference but still gaps. However, when I put the code back in, the graph drew a full line.. But, tried with another graph and it did the same thing. That is, did not correct the drawn line and has gaps.

Showing HA Data: