Apexcharts - hover on a very small column

Question

I have a situation while using apexcharts when one of the columns is very small. Its difficult to render the tooltip because you have to be very careful to hover the column.

Question: is there a way to extend the hover area so its easier to hover the column? Or maybe theres an option to render the tooltip when hovering the whole vertical area (the space over and below the column)? Thank you!

Playground with problem: https://codesandbox.io/s/react-basic-example-forked-nw3ll?file=/src/App.js

James Rose · Accepted Answer · 2021-07-11T18:01:27.750

5

One solution I have that seems to work is to set tooltip 'shared' to 'true':

tooltip: {
      enabled: true,
      shared: true, 
    },

By doing this, the tooltip will show above each column solution video

codesandbox solution

edited Jul 11 '21 at 18:01

answered Jul 11 '21 at 12:23

James Rose

81
4

Thanks but its still very hard to hover the small column, doesnt work :( – underfrankenwood Jul 11 '21 at 12:47
Maybe I misunderstood what you were asking for. Can you look at the solution video I just included in the answer and tell me if this is not what you're looking for? – James Rose Jul 11 '21 at 17:03
2

I wish I had 15 rep to upvote this. It works like a charm, thank you!!! – underfrankenwood Jul 11 '21 at 23:26
@underfrankenwood You have 15 rep now, upvote :-) – Haim Nov 06 '22 at 15:08

Apexcharts - hover on a very small column

1 Answers1