React-Chart.js : How do I increase the space between the legends and chart?

Question

There are a couple of questions that run along the same lines as mine. However, these questions focus on simply chart.js. I have a similar problem but on react-chart.js. How do I increase the space between the legend and chart? I have used padding but it only increases the space between the legends. Not quite what I wanted. Below is my doughnut chart component.

 <div className="dougnut-chart-container">
                <Doughnut
                    className="doughnut-chart" 
                    data={
                        {
                            labels: ["a", "b", "c", "d", "e", "f"],
                            datasets: [
                                {
                                    label: "Title",
                                    data: [12821, 34581, 21587, 38452, 34831, 48312],
                                    backgroundColor: [
                                        'rgb(61, 85, 69)',
                                        'rgb(115, 71, 71)',
                                        'rgb(166, 178, 174)',
                                        'rgb(209, 191, 169)',
                                        'rgb(66, 63, 62)',
                                        'rgb(43, 43, 43)',
    
                                    ]
                                }
                            ],
                        }
                    }
                    options={
                        {
                            plugins: {
                                legend: {
                                    labels: {
                                        color: "white",
                                        font: {
                                            size: 12
                                        },
                                        padding: 10,
                                    },
                                    position: "left",
                                    title: {
                                        display: true,
                                        text: "Title",
                                        color: "grey",
                                        padding: 10
                                    }
                                }
                            },
                            elements: {
                                arc: {
                                    borderWidth: 0
                                }
                            },
                            responsive: true,
                            maintainAspectRatio: true,
                            
                        }
                    }
                />
               
            </div>

What my chart looks like:

Answer 1

for react you can try this code ->

const legendMargin = {
  id: "legendMargin",
  beforeInit: function (chart) {
    const fitValue = chart.legend.fit;
    chart.legend.fit = function fit() {
      fitValue.bind(chart.legend)();
      return (this.height += 40);
    };
  }
};

then just need to pass legendMargin as a props like this way

<Bar options={options} data={data} plugins={[legendMargin]} />