How do I change tooltip position to be always on top?

See original GitHub issue

By default Apex Charts tooltip positioning is calculated automatically: https://codepen.io/apexcharts/pen/xYqyYm. According to the docs, you can only change it to fixed and put in one of the corners:

Apex.tooltip = {
    fixed: {
      enabled: true
    }
  };

How do I change it to be always centered on top of the marker?

Issue Analytics

State:
Created 4 years ago
Reactions:4
Comments:6

Top GitHub Comments

12reactions

simzikovcommented, Jan 4, 2020

In case anyone wants to change the position of tooltips without creating a custom one (cause it poses new difficulties). I am 100% sure there is a better way to do this, but here is my solution:

Apex.chart = {
    events: {
        mouseMove: function(event, chartContext, config) {
            var tooltip = chartContext.el.querySelector('.apexcharts-tooltip');
            var pointsArray = config.globals.pointsArray;
            var seriesIndex = config.seriesIndex;
            var dataPointIndex = config.dataPointIndex === -1 ? 0 : config.dataPointIndex;

            if (seriesIndex !== -1) {
                var position = pointsArray[seriesIndex][dataPointIndex];

                tooltip.style.top = position[1] + 'px';
                tooltip.style.left = position[0] + 'px';
            }
        }
    }
};

Then you can center it with CSS and transform. Thsi works at least for line charts, but I am sure there is a workaround for other types of charts.

3reactions

EeeDotZeecommented, Nov 18, 2020

I wanted to achieve something similiar to what most of the mobile app charts look like (to have a tooltip floating on the top of the chart). I altered the code from @simzikov a little bit, you can check out this codepen. It works fine on a touch device for me. Note: It’s a bit hacky for sure, also tooltips will clip over the menu, but i didn’t need the menu for mobile charts so it works fine if you deactivate it.