pankajd
Posts: 23
Joined: Tue Jul 21, 2020 5:58 am

HOW TO ALIGN LEGEND IN SAME LINE

HII,

I am working on pie chart.i want to align pie chart on the same line




in image all pie chart not align.legend showing up down
piechart.jpg
piechart.jpg (34.17 KiB) Viewed 954 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: HOW TO ALIGN LEGEND IN SAME LINE

Hello pankajd,

Thanks for contacting us with your question.

Please provide me with reproduction of your issue in a form of a live demo. You can start here: https://jsfiddle.net/BlackLabel/Lcf36abd/

Regards!
Mateusz Bernacik
Highcharts Developer
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: HOW TO ALIGN LEGEND IN SAME LINE

Hello pankajd,

Thanks for sharing that demo.

Legend with floating option is the only solution here. Without that chart elements are being resized based on legend height / number of items. You can further adjust legend position with maxHeight option of x and y offsets.
Demo:https://jsfiddle.net/BlackLabel/0kaw8ygf/
API reference: https://api.highcharts.com/highcharts/legend.floating

Let me know if you have any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer
pankajd
Posts: 23
Joined: Tue Jul 21, 2020 5:58 am

Re: HOW TO ALIGN LEGEND IN SAME LINE

I seen above example. But legend details is truncating .not displaying properly(user has to do scroll)
but now I increased height of legend,
same issue occurred

https://jsfiddle.net/BlackLabel/0kaw8ygf/
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: HOW TO ALIGN LEGEND IN SAME LINE

I've added maxHeight option to make sure that legends are aligned, but you're right, because of that items are truncated. If you don't like that option then the only thing you can do is to adjust legend position with y offset.
Demo: https://jsfiddle.net/BlackLabel/sew9yjav/
API reference: https://api.highcharts.com/highcharts/legend.y

This solution is not perfect, because might cause some problems with responsiveness. To prevent that you should use responsive rules:
https://api.highcharts.com/highcharts/responsive,
https://www.highcharts.com/docs/chart-c ... responsive

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”