Hovering offset in minimal layout

[ZerNico]

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
When using a column chart with minimal layout the hover area for the different bars get moved to the right. Hovering above a bar basically selects the one to the left.
The value displayed there isn't from the highlighted bar but from the one to the left. (also visible by the vertical line there)
The same also happens if you set

apex_config:
  grid:
   yaxis: 
     lines:
       show: false

but I suppose the same code is used internally with minimal.
It happens on both mobile and desktop and with Chrome and Firefox.

Version of the card
Version: v1.8.2

To Reproduce
This is the configuration I used:

type: 'custom:apexcharts-card'
graph_span: 6h
span:
  end: hour
layout: minimal
series:
  - entity: sensor.fl_server_plug_power_yearly
    type: column
    float_precision: 4
    group_by:
      func: diff
      duration: 1hour

Screenshots

Expected behavior
Hovering over an element should not be offset.

Desktop (please complete the following information):

• Browser Chrome, Firefox
• Version 90.0.4430.72, 98.0

Smartphone (please complete the following information):

• Device: Oneplus 7
• OS: Android 11
• Browser Home Assistant App
• Version 2021.4.1

[RomRider]

That is a bug with ApexCharts's library. I'll need to check if it has been fixed in the latest version which has been published some days ago.

[anoblet]

@RomRider Any update on this?

[RomRider]

I can't update to the latest version of ApexCharts.js because there's another bug way more annoying which has been introduced, so unfortunately not.

[JannesV]

Any update on this? This issue is still present. When investigating this I found it happens as soon as you disable the grid in one way or another. A workaround I've used is setting the gridColor to be transparent:

...
apex_config:
  grid:
    borderColor: "rgba(0,0,0,0)"
  xaxis:
    labels:
      show: false
    axisBorder:
      show: false
    axisTicks:
      show: false
    tooltip:
      enabled: false
...

[akeslo]

I believe I'm running into this as well. Hovering is offset and I have to hover on the left side to see the tooltip for the final value on the right side:

ScreenShot-2023-01-22.mov