Search code examples
javascriptcssreactjschartsapexcharts

Apexcharts - hover on a very small column

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

Solution

  • 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