Page 1 of 1

how to remove space between high chart legend and actual chart

Posted: Thu Dec 02, 2021 7:03 am
by pankajd
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

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

Posted: Thu Dec 02, 2021 7:50 am
by mateusz.b
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!

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

Posted: Fri Dec 03, 2021 6:21 am
by pankajd
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 1668 times

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

Posted: Fri Dec 03, 2021 9:05 pm
by mateusz.b
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!