Highcharts legend text wrap

[Bhargavi]

Hi Team,

My highcharts legend text length is more, I need to warp the text in two line. But I am unable to achieve that.
Below I am giving the code sand box link.
https://codesandbox.io/s/jovial-edison- ... mponent.ts


Thanks in advanve.

[jakub.j]

We appreciate you reaching out to us!

To wrap the text in the legend simply set textOverflow to 'null' in legend.itemStyle.

Demo: https://codesandbox.io/s/gallant-feather-qt7mll

If you need to break the text exactly into 2 lines, I did that using legend.labelFormatter. It might now work perfect but you can give it a go.

Demo: https://codesandbox.io/s/funny-rgb-8yxg9s

Let me know if you have any further questions!
Best regards
Jakub

[Bhargavi]

Hi jakub.j,
Thank you for your response.
If I follow the approach you suggested with legend.labelFormatter, my charts alignment is not proper since the legend text is different from chart to chart in my real time application looking like below image.

chartsLegend.png (37.45 KiB) Viewed 443 times

Is there any way that I can show my charts dispaly in same line and my legend text of my both charts has to start in the same line instead of ending in the same line.

Thanks in advance!

[jakub.j]

Hey!

I can see that this is a duplicate post from our forum. Please do not duplicate your topics on multiple channels because it only disrupts our work. You do not have to worry because we always answer all questions on our support platforms.

Please try now, I modified the formatter a little bit and also added useHTML to the legend. Now it should work as expected.
Demo: https://codesandbox.io/s/throbbing-pond-xmhzfz

Let me know if that was what you were looking for!
Best regards
Jakub

[Bhargavi]

Hi,
I am able to produce what is the exact issue with two different charts with different data, here I have used two static charts in my case the charts are dynamic with data, I have tried with exact code you had suggested but still I can see the issue.
Hope the following link will give you more clarity.
https://codesandbox.io/s/pensive-easley ... mponent.ts

Thank you

[jakub.j]

Hey!

I'm not sure if you sent me the correct demo, I can see only one chart (see here), could you please send me a live demo where you have multiple charts with the changes I have sent you and the problem with the misalignment still occurs?

Best regards
Jakub

[Bhargavi]

Hi,
I have adjusted css now in the below link
https://codesandbox.io/s/pensive-easley ... ponent.css
If you are still not able to see two charts please open the result in new tab.

Thank you

[jakub.j]

Hey,

I'm sorry, my mistake. I made some changes, I enabled legend.floating so that the plot area ignores the height of the legend, so it won't affect the chart alignment. I positioned the legend on the bottom of the chart and also set chart.marginBottom to 80, so that the plot makes space for the legend to render. Now everything is aligned.

Demo: https://codesandbox.io/s/distracted-swanson-8dpstf

Let me know if you have any further questions!
Best regards
Jakub

[Bhargavi]

Hi Jakub,
Thank you for your time.

Actually I know this solution but If I give marginBottom the space below the two charts are not same, where as my designer not agree to have the different px space.
I need to show the legend start in the same line for both charts but if we use marginBottom the legends are not coming at the same line instead ending at the same line.
Let me know if there any way that we can achieve this.
Thank you!

[jakub.j]

Hey!

Instead of legend.verticalAlign: 'bottom', you can set it to 'top' and than with the legend.y property, set it's position exactly where it needs to be.
Please check out the demo below:

Demo: https://codesandbox.io/s/festive-lucy-hdgmyz

Let me know if you have any further questions!
Best regards
Jakub

[Bhargavi]

Hi,
This approach is breaking when my legend text is lengthy and also it is completely breaking in mobile view.
Can you help me to provide the solution which works in all resolution and also my legend length is more.
Thank you
Bhargavi Illuri

[jakub.s]

Hi,

Dealing with lengthy text on small resolutions might be tricky.

The best solution depends on multiple factors: your text, UI/UX design, what information should the chart convey, etc.

Without knowing much about your project, I'd simply recommend you adjust some of the chart's properties via the responsive table.

API: https://api.highcharts.com/highcharts/responsive

Here are some of the things that you can do:
- make the lengthy text of the legend shorter
- position the legend differently
- hide the legend completely
- render a custom legend with the SVGRenderer (https://api.highcharts.com/class-refere ... VGRenderer)

Here's a simple demo showing the usage of the responsive table: https://jsfiddle.net/BlackLabel/fu2dwceL/

If you resize the window so that the width of the chart is below 400px you'll notice that the text in the legend changes.

Let me know if you have any more questions.

Regards!

[Bhargavi]

Hi,

As the above methodology breaking in mobile view, we are decided to show our legends as in below example.
https://codesandbox.io/s/festive-lucy-h ... mponent.ts

But here we have one requirement i.e when the legend wrapps in two lines then we need to show the legend as center align, to be more specific my second line also need to be center align insted of starting from left align.


Thank you!

[jakub.j]

Hey!

There is no way to center this text by default, you can try to add dummy dots to move the text around with legend.labelFormatter.

Demo: https://codesandbox.io/s/crimson-voice-53vt4j

Best regards
Jakub