170
rated 0 times
[
174]
[
4]
/ answers: 1 / hits: 5575
/ 3 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:
- create a function to append legend tooltip html and css into to the chart's legend series container.
- set this function to be called in these two apexcharts events:
charts.events.updated()andcharts.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. - and overwrite
.apexcharts-legendclass'soverflow:autotooverflow:unset !important, this is to avoid scrollbar showing up for thediv.apexcharts-legendcontainer 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, 3 Years
[reply]
[flag answer]
answered 3 Years ago
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
martina questions
Tue, Feb 2, 21, 00:00, 3 Years ago
Wed, Dec 30, 20, 00:00, 3 Years ago
Thu, Sep 24, 20, 00:00, 3 Years ago
Fri, Apr 24, 20, 00:00, 4 Years ago
Wed, Apr 22, 20, 00:00, 4 Years ago