How to show legend tooltip when hover on legend series in ApexCharts.js

Question

Currently there is no such feature in apexchart v3.19.3, does anyone have a work around for this?

Answer 1

I end up created a custom legend tooltip to be shown when hovered on legend series.

below are the steps for this solution:

1. create a function to append legend tooltip html and css into to the chart's legend series container.
2. set this function to be called in these two apexcharts events: charts.events.updated() and charts.events.mounted(), this is to ensure the legend tooltip template is always available in apexcharts, since the apexcharts will remove previously appended custom legend tooltip template whenever the apexcharts updates internally.
3. and overwrite .apexcharts-legend class's overflow:auto to overflow:unset !important, this is to avoid scrollbar showing up for the div.apexcharts-legend container when legend tooltip shows up.

https://jsfiddle.net/sqiudward/sjgLbup8/61/

var chartData = [{
    name: 'sales 1990',
    data: [30,40,35,50,49,60,70,91,125],
    description: 'this is sale 1990 data'
  },{
    name: 'sales 2000',
    data: [33,43,37,53,52,100,73,94,128],
    description: 'this is sale 2000 data'
  }];

var setLegendTooltip = function(){

  chartData.forEach(function(cd,i){
    let idx = i + 1;
    let id = '.apexcharts-legend-series[rel="'+ idx +'"]';
    let tooltipHtml = '<div class="legend-tooltip-' + idx + '">'+ cd.description +'</div>';
    let tooltipCss = 
      '<style type="text/css">' +
        '.legend-tooltip-' + idx + '{' +
            'display: none;' +
            'position: absolute;' +
            'left: 25%;' +
            'bottom: 40%;' +
            'border: 1px solid red;' +
            'border-radius: 2px;' +
            'background-color: #eee;' +
            'z-index: 1500;' +
            'font-size: 13px;' +
            'text-overflow: ellipsis;' +
            'white-space: nowrap;' +
            'overflow: hidden;' +
            'width:110px;' +
         '}' +
         
         '.apexcharts-legend-series[rel="' + idx + '"] {' +
              'position: relative;' +
         '}' +
         
         '.apexcharts-legend-series[rel="' + idx +'"]:not(.apexcharts-inactive-legend):hover > .legend-tooltip-' + idx + '{' +
              'display: block' +
         '}' +
      '</style>';
        
    $(id).append(tooltipCss + tooltipHtml);
    })

    $(".apexcharts-legend").addClass("apexcharts-legend-default-overflow");

};

var options = {
  chart: {
    type: 'line',
    background: '#fff',
     events: {
         updated: function(chartContext, config) {
            setLegendTooltip();
         },
         mounted: function(chartContext, config) {
            setLegendTooltip();
         }
    }
  },
  title: {
     text: 'Sales from 1990 - 2000',
     align: 'left'
  },
  series: chartData,
  xaxis: {
    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
  },
  legend: {
    show: true,
   
  },
  
  theme: {
      mode: 'light', 
      palette: 'palette1', 
  }
  
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

.apexcharts-legend-default-overflow {
  overflow: unset !important;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.19.3/dist/apexcharts.min.js"></script>

<div id="chart"></div>