K.T
Posts: 50
Joined: Tue Aug 16, 2022 3:37 am

View Data Table - Line break <br /> not working

Hello Highcharts

when I add a line break into my categories this does not translate when I view my data table.
Please can you advise a solution for this.

https://jsfiddle.net/7n9ekcvd/

Thank you
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: View Data Table - Line break <br /> not working

Hi K.T!
Thanks for contacting us with your question!

Unfortunately, in HC Core the HTML element <br> is not treated as new line mark. It is just used as a string (textContent) and that's why you don't see new lines. But there is a way to achieve it, by using a custom plugin on the proper event in Highcharts (from 52nd line). Please, check the demo below to see an example.

Demo: https://jsfiddle.net/BlackLabel/oj54yL7r/

Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer
K.T
Posts: 50
Joined: Tue Aug 16, 2022 3:37 am

Re: View Data Table - Line break <br /> not working

Thank you for your reply.

This is looking great however I do have a few other questions.
1. Can this also reflect for the Chart Title
2. When putting the new code and line breaking on the Categories it the text on the chart is now left aligned and not centred is this something that can be centred on both the Chart and in the Table.

Thank you look forward to hearing from you soon.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: View Data Table - Line break <br /> not working

K.T,

To reflect this to work with the chart title, you need more extra lines of code. To center the labels all you need to set is xAxis.labels.style.textAlign property to 'center'. You can find it in the demo below.

Demo: https://jsfiddle.net/BlackLabel/vonfhx9m/

Feel free to ask any further questions.
Regards!
Hubert Kozik
Highcharts Developer
K.T
Posts: 50
Joined: Tue Aug 16, 2022 3:37 am

Re: View Data Table - Line break <br /> not working

Herbert

Amazing thank you for the example. Just what I needed.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: View Data Table - Line break <br /> not working

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer
K.T
Posts: 50
Joined: Tue Aug 16, 2022 3:37 am

Re: View Data Table - Line break <br /> not working

Hello Highcharts

The example you have provided only appears to work when there is a single category on my xAxis.
Is there an example you can provide where this line break will reflect in the data table when there is multiple categories.


Additionally I am also using the grouped-categories.js and would also like to add a line break when the <br> tag is expressed.
Is it possible for you to provide an example for this circumstance too.

Grouped - Categories https://jsfiddle.net/jy9pkunr/

Thank you in advance for your assistance.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: View Data Table - Line break <br /> not working

Hi again K.T!
This is a custom thing, so it is normal, that it has stopped working when you used a grouped-categories plugin, which impacts the structure of the data table. I have prepared another custom plugin for you, which can be used with grouped-categories plugin - it will not work without it.

Demo: https://jsfiddle.net/BlackLabel/4n1eqz7b/

Do not hesitate to contact us in the future.
Regards!
Hubert Kozik
Highcharts Developer
K.T
Posts: 50
Joined: Tue Aug 16, 2022 3:37 am

Re: View Data Table - Line break <br /> not working

Thank you Herbert

Looks great with one exception it is now dropping the first part of the grouping in my case the Question number i.e. Q1, Timepoint 1 - 01/Jan/2022 - 31/Mar/2022.

Your clarity on bring this back would be greatly appreciated.

Thank you
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: View Data Table - Line break <br /> not working

K.T,
I am sorry, I didn't notice the disappearance of the Q1 and Q2 categories. As usual in custom JS code, the fix was about adding some more custom logic. Please, take a look at the demo below.

Demo: https://jsfiddle.net/BlackLabel/mg69yrn8/

Regards!
Hubert Kozik
Highcharts Developer
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: View Data Table - Line break <br /> not working

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”