Some bugs Apexcharts with Fullykiosk since last update

[LioBoul]

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
Since the last Apexcharts update, I have a few small bugs:

• extrema shifts
• the chart is not displayed if one of the values ​​is show: in_chart: false (I got around this problem with full opacity)

Bugs only with Fullykiosk browser, not Chrome.
Cache cleared.

Screenshots

Version of the card
Version: last

To Reproduce
This is the configuration I used:

type: custom:apexcharts-card
apex_config:
  legend:
    show: false
  chart:
    height: 140px
experimental:
  color_threshold: true
graph_span: 7d
span:
  end: day
show:
  last_updated: false
header:
  show: true
  show_states: true
  colorize_states: true
  title: Appareils électriques / Éclairages
yaxis:
  - min: 0
    max: ~9
    decimals: 0
    apex_config:
      tickAmount: 3
series:
  - entity: sensor.consommation_totale_des_appareils
    name: Conso aujourd'hui
    float_precision: 2
    show:
      header_color_threshold: true
      extremas: true
    header_actions:
      tap_action:
        action: navigate
        navigation_path: /lio-cindy-essential/conso
    type: column
    color: grey
    group_by:
      func: diff
      fill: last
      duration: 1d
    color_threshold:
      - value: 0
        color: limegreen
      - value: 6
        color: orange
      - value: 9
        color: red
  - entity: sensor.consommation_totale_des_appareils
    transform: return x * 0.363636
    name: Coût
    unit: €
    float_precision: 2
    opacity: 0
    color_threshold:
      - value: 0
        color: white
      - value: 10
        color: white
    group_by:
      func: diff
      fill: last
      duration: 1d
    show:
      header_color_threshold: true
      extremas: false
    header_actions:
      tap_action:
        action: navigate
        navigation_path: /lio-cindy-essential/conso
  - entity: sensor.conso_appareils_7_derniers_jours
    transform: return x / 7
    name: Conso moyenne
    float_precision: 2
    stroke_width: 0
    color: grey
    opacity: 0.3
    show:
      in_header: false
      header_color_threshold: false
      in_chart: true
      extremas: true
    type: area
    group_by:
      func: last
      fill: last
      duration: 8d
    color_threshold:
      - value: 6
        color: limegreen
      - value: 7.5
        color: orange
      - value: 9
        color: red

Expected behavior
A clear and concise description of what you expected to happen.
Reload...

Desktop (please complete the following information):

• Browser Fullykiosk
• Version 1.55.3-play

Smartphone (please complete the following information):

• no bug

[RomRider]

For

the chart is not displayed if one of the values ​​is show: in_chart: false (I got around this problem with full opacity)

It's already fixed in 2.1.1

For the other issue, I'm fixing it.

[github-actions]

🎉 This issue has been resolved in version 2.1.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[LioBoul]

Not fixed for me with fullykiosk browser after 2.1.2 update :-(
The 2 bugs are already presents.

[RomRider]

Probably a cache issue

[LioBoul]

Cache deleted... :-(

[RomRider]

Check your javascript console for the apexcharts-card version, please. Fullykiosk probably still uses the old version 2.1.0

[LioBoul]

How can I do this?

[RomRider]

if it works on chrome (with the latest version 2.1.2 displayed in the javascript console of chrome) I can 100% assure you fullykiosk is still running an old version of the card.

[LioBoul]

Cache fullykiosk and all params deleted. The same :-(

[RomRider]

Please read my last comment and make sure it works on Chrome (on your computer) and that the javascript console displays v2.1.2. If it works on your computer, fullykiosk is still using an old version.
FYI, Fullykiosk is using android's chrome to display the webpage.

[LioBoul]

It works fine on my computer and chrome.
My fullykiosk tablet is param on "Delete Cache on Auto Reload – clear cache before reloading".
The problem was only ever on my tablet (fullykiosk), not my computer.
Tks for your help ! :-)

[RomRider]

The reason I asked you to check on your computer is to make sure it works somewhere.
If it works on your computer, that means FK was (is?) using an older version.

Does it work now on FK ?

[LioBoul]

Fully kiosk & Chrome deleted and réinstalled on tablet.

• The problem "chart not displayed" if fixed
• But not for the "extrema shifts"

[LioBoul]

On the left cards, the extremas are almost right but not center vs the column (only on Fullykiosk again).

We are almost there ! :-)

[LioBoul]

Maybe in my syntax ?

type: custom:apexcharts-card
apex_config:
  legend:
    show: false
  chart:
    height: 140px
experimental:
  color_threshold: true
graph_span: 7d
span:
  end: day
show:
  last_updated: false
header:
  show: true
  show_states: true
  colorize_states: true
  title: Appareils électriques / Éclairages
yaxis:
  - min: 0
    max: ~9
    decimals: 0
    apex_config:
      tickAmount: 3
series:
  - entity: sensor.consommation_totale_des_appareils
    name: Conso aujourd'hui
    float_precision: 2
    data_generator: ''
    show:
      header_color_threshold: true
      extremas: true
    header_actions:
      tap_action:
        action: navigate
        navigation_path: /lio-cindy-essential/conso
    type: column
    color: grey
    group_by:
      func: diff
      fill: last
      duration: 1d
    color_threshold:
      - value: 0
        color: limegreen
      - value: 6
        color: orange
      - value: 9
        color: red
  - entity: sensor.consommation_totale_des_appareils
    transform: return x * 0.363636
    name: Coût
    unit: €
    float_precision: 2
    color_threshold:
      - value: 0
        color: white
      - value: 10
        color: white
    group_by:
      func: diff
      fill: last
      duration: 1d
    show:
      in_chart: false
      header_color_threshold: true
      extremas: false
    header_actions:
      tap_action:
        action: navigate
        navigation_path: /lio-cindy-essential/conso
  - entity: sensor.conso_appareils_7_derniers_jours
    transform: return x / 7
    name: Conso moyenne
    float_precision: 2
    stroke_width: 0
    color: grey
    opacity: 0.3
    show:
      in_header: false
      header_color_threshold: false
      in_chart: true
      extremas: true
    type: area
    group_by:
      func: last
      fill: last
      duration: 8d
    color_threshold:
      - value: 6
        color: limegreen
      - value: 7.5
        color: orange
      - value: 9
        color: red

[RomRider]

Mixing columns and area/line seems to generate this issue (extremas aligned to the edge of the column). It's an apexchart.js issue which I can't fix unfortunately.

[LioBoul]

Why not before update ?
And on computer, it's ok with the same code :

[RomRider]

Because I've updated the apexcharts.js library to the latest version, and it seems it has introduced some bugs and fixed others...
And for your question: Your computer is still using the old version... That's why...

[LioBoul]

Okayyy !
Waiting fixing issue by Apex than...
Tks for all @RomRider ! :-)

[RomRider]

?

[LioBoul]

You explain to me that the problem (extremes aligned to the edge) comes from Apex so we can only wait for their update