I want my legend chart to be a table that handles all the events of the default Highcharts legend. For example, click, hover and etc . I was able to implement the click section according to a topic. What do you suggest for the rest?
This is my code :
Code: Select all
Highcharts.chart("custom-query-chart" , customQueryChartOptions , function (chart) {
$('#customLegend').empty();
$legend = $('#customLegend');
$.each(chart.series, function (j, data) {
element = $(data.legendGroup.element.outerHTML);
element.attr("transform", "translate(0,0)");
$('#customLegend .item').click(data.legendGroup.onEvents.click);
$legend.append(`<tr>
<td>
<svg class="item" width="220" height="25">${element.html()}</svg>
</td>
</tr>
`);
});
$('#customLegend .item').click(function(){
debugger
var inx = $(this).index(),
point = chart.series[inx];
if(point.visible)
point.setVisible(false);
else
point.setVisible(true);
});
});