How to insert a line break or carriage return inside Legend

[octavient]

I have a chart with 8 - 12 different Series (depending on context), and the Legend is getting unwieldy (long and wrapping in awkward places). Is there a way to insert a line break after the 4th Legend Item (for example), instead of just letting the browser wrap it...?

See example: http://www.screencast.com/t/aXjfFRfTH3tX

[KacperMadej]

Hi,

It is possible to set width for legend - API: http://api.highcharts.com/highcharts#legend.width.
However, if you need to customize your legend more than it is possible to do through API, then you might be interested in creating a custom legend.
Examples:
- http://jsfiddle.net/stickerdude/1eg7yLmr/
- http://jsfiddle.net/N3KAC/1/

In case of further problems or any questions, please feel free to ask and a live example, like JSFiddle, will be appreciated.

Best Regards,
Kacper Madej

[octavient]

Thank you. Setting the width will work for now, and I'll assess using a custom legend, at some point. Thank you very much.

[KacperMadej]

You are welcome.

In case of any problems with custom legend implementation, please feel free to ask.

Kind Regards.

[ericplan]

This topic is over 3 years old, but my question is the same. I want to add a line break between series to divide the legend over two lines.

Is it possible to put a line break (or a spacer) in the legend (without building a custom) in the current Highcharts version?

[rafalS]

Hi Eric,

Yes, I found a different approach a few months ago. You can find my full answer here: https://stackoverflow.com/questions/543 ... 9#54347409

You can break the legend line using my custom series.newLine property.

jsFiddle: https://jsfiddle.net/BlackLabel/zbcLeyat

Best regards!

[ericplan]

Hi Rafal,

Very nice function, should be in the Highcharts core Implemented it straight away.

[ericplan]

Hi Rafal,

It works nice, I have one suggestion. Don't know if it is possible to modify the alignment? Now it is left orientated, for my chart centered would be nice.

(I missed your previous answer, because it was not in the topics list. Why? My settings or forum settings?)

[rafalS]

Eric,

I should be possible - layoutItem method, wrapped in the example above, is responsible for items layout. You can modify it however you want.

Best regards!

[ericplan]

Hi Eric,

Yes, I found a different approach a few months ago. You can find my full answer here: https://stackoverflow.com/questions/543 ... 9#54347409

You can break the legend line using my custom series.newLine property.

jsFiddle: https://jsfiddle.net/BlackLabel/zbcLeyat

Best regards!

Since version 3.1 this function is not working anymore as you can see in the fiddle. All text is scrambled. It worked until version 2.1. Is this a bug? Or should the function be rewritten?

Regards,
Eric

[michal.f]

Hello,

Is this a bug? Or should the function be rewritten?

This function has been modified in subsequent versions, which is why such a bug appeared. All you need to do is extract the current one from the code and add checking the newLine custom option in line 21.

Demo: https://jsfiddle.net/BlackLabel/5bsk0rxc/

Best regards!

[ericplan]

Hello,
Implemented this yesterday and it works fine, thanks.
(It led to another problem with viewtopic.php?f=9&t=42157&p=148690#p148450 which also has to do with the legend and incompatibility with version 10.3.1, so I continue there)

[michal.f]

That's great to hear!

I understand, I'll take a look at that topic and if I find out anything, I'll let you know there.

Best regards!