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]} />

Answer 2

You can write a custom plugin as showed by this answer, but instead of adding some extra space to the height you will need to add some extra spacing to the width of the legend boxes:

var options = {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    }]
  },
  options: {
    plugins: {
      legend: {
        position: 'left'
      },
      legendDistance: {
        padding: 50
      }
    }
  },
  plugins: [{
    id: 'legendDistance',
    beforeInit(chart, args, opts) {
      // Get reference to the original fit function
      const originalFit = chart.legend.fit;

      // Override the fit function
      chart.legend.fit = function fit() {
        // Call original function and bind scope in order to use `this` correctly inside it
        originalFit.bind(chart.legend)();
        // Change the height as suggested in another answers
        this.width += opts.padding || 0;
      }
    }
  }]
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

Answer 3

This answer suggested by @LeeLenalee works for me. But for those who are confused and wants to see this integrated in their components, here is what I did:

<div className="dougnut-chart-container">
                <Doughnut
                    className="doughnut-chart" 
                    data={
                        {
                            labels: ["label_1", "label_2", "label_3", "label_4", "label_5", "label_6"],
                            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,
                                    },
                                    title: {
                                        display: true,
                                        text: "A Longer Title To Occupy Space",
                                        color: "grey",
                                        padding: {
                                            bottom: 10
                                        },
                                        font: {
                                            size: 13
                                        }
                                    },
                                    position: "left"

                                },
                                // this is the id that is specified below
                                legendDistance: {
                                    padding: 130 // dictates the space
                                }
                            },
                            elements: {
                                arc: {
                                    borderWidth: 0
                                }
                            },
                            responsive: true,
                            maintainAspectRatio: true,
                            
                        }
                    }
                    plugins={
                        [
                            {
                                id: 'legendDistance',
                                beforeInit(chart, args, opts) {
                                    // Get reference to the original fit function
                                    const originalFit = chart.legend.fit;
                                    // Override the fit function
                                    chart.legend.fit = function fit() {
                                        // Call original function and bind scope in order to use `this` correctly inside it
                                        originalFit.bind(chart.legend)();
                                        // Specify what you want to change, whether the height or width
                                        this.width += opts.padding || 0;
                                    }
                                }
                            }
                        ]
                    }
                />
               
            </div>

This is the result: result

Take note: You need to reload your page to see the changes.