According to Sachi Tekina, creating a custom legend is the most effective way to achieve this goal. Highcharts legends are constructed in a way that does not allow them to be split into two lines as demonstrated in your example, whether it be through code options or CSS modifications (primarily due to their use of position: absolute, which can make adjustments quite cumbersome).
Here is an instance of a personalized legend I developed using a Highcharts demo: http://jsfiddle.net/brightmatrix/g0tfe12j/
To begin, construct your customized legend using checkboxes. Take note of the break tag used to shift some onto a second line.
<div align="center">
<form id="test" name="test" method="post">
<input type="checkbox" class="myCheckboxClass" name="myCheckbox" series="Tokyo" id="checkbox1" checked><label for="checkbox1">Tokyo</label>
<input type="checkbox" class="myCheckboxClass" name="myCheckbox" series="New York" id="checkbox2" checked><label for="checkbox1">New York</label>
<br />
<input type="checkbox" class="myCheckboxClass" name="myCheckbox" series="Berlin" id="checkbox3" checked><label for="checkbox1">Berlin</label>
<input type="checkbox" class="myCheckboxClass" name="myCheckbox" series="London" id="checkbox4" checked><label for="checkbox1">London</label>
</form>
</div>
Subsequently, implement a function that activates whenever a checkbox is interacted with. This function will check the custom attribute in each checkbox ("series") and toggle the related series on or off within your chart:
// when a checkbox is clicked, trigger the function
$(".myCheckboxClass").on('click',function() {
// get the value of "series", a custom attribute for the checkbox
var seriesName = $(this).attr("series");
// if that value matches a series, show or hide it in the chart
for (i = 0; i < $("#container").highcharts().series.length; i++) {
if ($("#container").highcharts().series[i].name == seriesName) {
// if the checkbox is checked, show the dataset
if ($(this).prop("checked")) {
$("#container").highcharts().series[i].show();
// if the checkbox is unchecked, hide the dataset
} else {
$("#container").highcharts().series[i].hide();
}
}
}
});
Finally, style the custom legend to complement your chart design preferences.
I trust this information proves beneficial to you.