Is there any way to change the space taken by the legends in a chart ?

Yes, there is, you can change the box size of it and the padding between the legends:
var chartLegend = {
labels: {
boxWidth: 15,
padding: 10, }, };
<Pie legend={chartLegend} data={chartData}></Pie>
When changing the value for the boxWidth, only the width of the colored boxes in each of the legend items are changed.
Adding padding as you have mentioned creates padding between each of the rows in the legend set.
But the desired behavior is to set a max-height property to limit the space taken by the legend section. Is there any way we can achieve this behavior @Ahmad-AlShalabi ?
I'm facing the exact same issue. What could be the solution ?