Toolbar icons for zoom and pan not shown on mobile phone

[jmozmoz]

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
The zoom in/out and the pan icons in the toolbar are not shown on a mobile phone. Neither for the mobile nor the "desktop" mode using Chrome or Firefox (Android 14).

Version of the card
Version: v2.1.2

To Reproduce
This is the configuration I used:

type: custom:apexcharts-card
apex_config:
  chart:
    height: 300px
    zoom:
      enabled: true
    toolbar:
      show: true
      tools:
        zoom: true
        zoomin: true
        zoomout: true
        pan: true
        reset: true
  header:
    align: left
    strokeWidth: 0
header:
  show: true
  standard_format: true
  show_states: true
  colorize_states: true
graph_span: 1d
span:
  start: day
  offset: +0d
now:
  show: false
  label: Jetzt
yaxis:
  - id: Wh
    min: 0
    max: 1600
    align_to: 100
    apex_config:
      tickAmount: 8
  - id: "%"
    min: 0
    max: 100
    align_to: 100
    opposite: true
    apex_config:
      tickAmount: 4
  - id: header
    show: false
series:
  - entity: sensor.battery_energy
    yaxis_id: Wh
    type: line
    name: Ladestand
    show:
      legend_value: false
      in_header: false
      in_legend: true
    float_precision: 2
    extend_to: now
    color: grey
    stroke_width: 2
  - entity: sensor.state_of_charge
    yaxis_id: "%"
    type: line
    name: Ladestand %
    show:
      legend_value: false
      in_header: false
      in_legend: false

Screenshots
This is firefox on Windows:

This is the mobile version in Chrome Android 14:

This is the "desktop" version in Chrome Android 14:

The zoom in, zoom out and reset icons are shown. They also work. Zooming is always fixed to the middle of the x-axis. When "clicking" on the missing icons, nothing is happening.

Expected behavior
Zooming into the graph by touching/sweping over a range of the graph should work like selecting it on the desktop. Also paning should work like on the desktop.

Desktop (please complete the following information):

• Browser Firefox
• Version 138.0

Smartphone (please complete the following information):

• Device: Sony Xperia 10 IV
• OS: Android 14
• Browsers: Chrome, Firefox
• Version Chrome: 135.0, Firefox 138.0

Additional context
Seems to apply to all apex charts with zoom in/out, pan in the toolbar.

[jmozmoz]

I used the firefox inspector to check those icons.

If use simulate a mobile device using firefox on Windows, these are the entries for for the two icons:

<div class="apexcharts-zoom-icon apexcharts-selected" title="Auswahl vergrößern"><svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
...
</svg></div>
<div class="apexcharts-pan-icon" title="Verschieben"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
...
</svg></div>

Inspecting the page on a mobile device, they look like this:

<div class="apexcharts-element-hidden apexcharts-selected" title="Auswahl vergrößern"><svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
...</svg></div>
<div class="apexcharts-element-hidden" title="Verschieben"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
...</svg></div>

So, why includes the classes of the buttons on Windows apexcharts-zoom-icon and apexcharts-pan-icon whereas on the mobile device it is apexcharts-element-hidden?

Googling for it, I found these issues:

• Toolbar not showing all icons apexcharts/apexcharts.js#1065
• pan and zoom unavailable on touch devices apexcharts/apexcharts.js#4701

So, it seems to be a problem of apex charts itself.

[bo4arov]

Greetings,

I think it's just that zoom is not supported on mobile devices, see apexcharts/apexcharts.js#3675
However, in ApexCharts v4.1 the support for zoom on mobile was added https://github.com/apexcharts/apexcharts.js/releases/tag/v4.1.0 (PR apexcharts/apexcharts.js#4823)
I think we just need to update the version of underlying ApexCharts used in this card. @RomRider any plans to do that?

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[jmozmoz]

Is this project still alive? No commits this more than a year. Alternatively, are there instructions how to build this yourself?

[vingerha]

Good question, I started my own repo to a.o. fix above apex version and some other stuff. The thing is that it is a challenging card on the code and also on the repo.
As with (guessing?) romrider's time, also my time but also knowledge are limited...so you can try below (it will overwrite the other one) but I am not sure if I can support it at the right level, still: a bit more is better than nothing :)

https://github.com/vingerha/apexcharts-card

[vingerha]

Adding, the above functionality apparently still does not work
apexcharts/apexcharts.js#5062

[vingerha]

Correction: it does (!) work, the icons are still not shown however and this is also brought forward with the apexcharts repo. One can 'click' on the hidden icon and then use its func.

[jmozmoz]

Correction: it does (!) work, the icons are still not shown however and this is also brought forward with the apexcharts repo. One can 'click' on the hidden icon and then use its func.

I can confirm, it works. You can now also zoom into a chart by swiping with a finger over a parts of it.

By the way: Your repo can be added HACS manually: Clicking the three dots at the upper right -> Custom repositories
So you might add this to your README.

I removed the old installation form this repo, restarted HA, added your repo and the restarted HA again.

[vingerha]

I am waiting for my PR to be released in apexcharts.js...that should then also show the icons...it would require a new release in my repo too then :)

[vingerha]

fixed with : https://github.com/vingerha/apexcharts-card/releases/tag/v1.4.0