ma.aghasi
Posts: 1
Joined: Sat May 14, 2022 2:19 pm

How to have custom legend in Highchart

Hello
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);
          });        
  
        });
Thanks . :D
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to have custom legend in Highchart

Hi ma.aghasi,

Welcome to our forum and thanks for contacting us with your question!

Your code seems to be correct, the click event should set series' visibility. To replicate hover behaviour you should use setState method, for example to set inactive state for not hovered series:
Demo: https://jsfiddle.net/BlackLabel/o64teqrv/
API reference: https://api.highcharts.com/class-refere ... s#setState

Legend events consist of click and hover. It seems that you already handled click events, so once the hover is handled you're mostly done.

Let me know if you have any further questions.

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”