How do I rotate the legend in Highcharts?

Question

Instead of showing the legend on the bottom under my chart, I want to show it to the left of the y axis, rotated 90 degrees. How do I do that?

Answer 1

You can set a custom legend:

$("#a1").click(function() {
    $('.highcharts-legend-item:nth-child(1)').click();
    $(this).toggleClass("leg-clicked");
  });

Use this property in CSS to rotate the legend:

-webkit-transform: rotate(90deg);

Please check the following example:

$(function() {

  $("#a1").click(function() {
    $('.highcharts-legend-item:nth-child(1)').click();
    $(this).toggleClass("leg-clicked");
  });

  $('#container').highcharts({

    series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }]
  });
});

Be sure to deactivate Highcharts' legend in CSS:(otherwise, you will get two legends)

.highcharts-legend {
  display: none;
}