Saturday, May 25, 2024
 Popular · Latest · Hot · Upcoming
170
rated 0 times [  174] [ 4]  / answers: 1 / hits: 5621  / 4 Years ago, thu, july 23, 2020, 12:00:00

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


More From » hover

 Answers
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/[email protected]/dist/apexcharts.min.js></script>

<div id=chart></div>




[#3098] Monday, July 20, 2020, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
martina

Total Points: 101
Total Questions: 103
Total Answers: 111

Location: Seychelles
Member since Mon, Jun 28, 2021
3 Years ago
;