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

how to remove space between high chart legend and actual chart

Thu Dec 02, 2021 7:03 am

Hii,

i am working on high chart so i have added legend to the chart.chart has 100% width
now problem is there is vertical space coming between chart and legend
so how to remove space Image

i have put my code into jsfiddle

https://jsfiddle.net/pankaj_durve/ycf2dzL1/1/


please provide the solution
Attachments
space_removed.png
space_removed.png (42.36 KiB) Viewed 345 times

mateusz.b
Posts: 2007
Joined: Tue Jul 13, 2021 11:34 am

Re: how to remove space between high chart legend and actual chart

Thu Dec 02, 2021 7:50 am

Hello pankajd,

Thanks for contacting us with your question.

I think in this case reducing chart height would be the best idea. You could try to play a bit with legend alignment options or even try floating legend (https://api.highcharts.com/highcharts/legend.floating), but this most likely won't solve empty space problem. I would suggest something like this:
https://jsfiddle.net/BlackLabel/nv57wm1a/

Let me know what do you think about this solution.
Regards!
Mateusz Bernacik
Highcharts Developer

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

Re: how to remove space between high chart legend and actual chart

Fri Dec 03, 2021 6:21 am

how to give individual height parameter for actual graph and legend
suppose graph having 200px height
legend height equal to 100px

is it possible??

now issue is overlapping legend on chart
Untitled.png
Untitled.png (33.54 KiB) Viewed 327 times

mateusz.b
Posts: 2007
Joined: Tue Jul 13, 2021 11:34 am

Re: how to remove space between high chart legend and actual chart

Fri Dec 03, 2021 9:05 pm

Hello pankajd,

To set height for whole chart it would be chart.height property, only pie size it would be pie.sisze.
When it comes to legend, it is not possible to set fixed legend height. You can use legend.maxHeight to limit it height though.
Demo: https://jsfiddle.net/BlackLabel/b5cdx6k3/
API reference: https://api.highcharts.com/highcharts/series.pie.size,
https://api.highcharts.com/highcharts/legend.maxHeight,
https://api.highcharts.com/highcharts/chart.height

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”