Title: React-Chart.js : How do I increase the space between the legends and chart?
Tags: javascript;reactjs;chart.js;react-chartjs
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=&quot;dougnut-chart-container&quot;&gt;
                <Doughnut
                    className=&quot;doughnut-chart&quot; 
                    data={
                        {
                            labels: [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;, &quot;e&quot;, &quot;f&quot;],
                            datasets: [
                                {
                                    label: &quot;Title&quot;,
                                    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: &quot;white&quot;,
                                        font: {
                                            size: 12
                                        },
                                        padding: 10,
                                    },
                                    position: &quot;left&quot;,
                                    title: {
                                        display: true,
                                        text: &quot;Title&quot;,
                                        color: &quot;grey&quot;,
                                        padding: 10
                                    }
                                }
                            },
                            elements: {
                                arc: {
                                    borderWidth: 0
                                }
                            },
                            responsive: true,
                            maintainAspectRatio: true,
                            
                        }
                    }
                /&gt;
               
            </div&gt;
```
What my chart looks like:



Here is the accepted answer: 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=&quot;dougnut-chart-container&quot;&gt;
                <Doughnut
                    className=&quot;doughnut-chart&quot; 
                    data={
                        {
                            labels: [&quot;label_1&quot;, &quot;label_2&quot;, &quot;label_3&quot;, &quot;label_4&quot;, &quot;label_5&quot;, &quot;label_6&quot;],
                            datasets: [
                                {
                                    label: &quot;Title&quot;,
                                    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: &quot;white&quot;,
                                        font: {
                                            size: 12
                                        },
                                        padding: 10,
                                    },
                                    title: {
                                        display: true,
                                        text: &quot;A Longer Title To Occupy Space&quot;,
                                        color: &quot;grey&quot;,
                                        padding: {
                                            bottom: 10
                                        },
                                        font: {
                                            size: 13
                                        }
                                    },
                                    position: &quot;left&quot;

                                },
                                // 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;
                                    }
                                }
                            }
                        ]
                    }
                /&gt;
               
            </div&gt;
```
This is the result: result
Take note: You need to reload your page to see the changes.


Here is another answer: for react you can try this code -&gt;
```const legendMargin = {
  id: &quot;legendMargin&quot;,
  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]} /&gt;```

Comment for this answer: This wont work, the legend is on the side of the chart so the height does not affect its distance to the chart

Here is another answer: 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&gt;
  <canvas id="chartJSContainer" width="600" height="400"&gt;</canvas&gt;
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"&gt;</script&gt;
</body&gt;```





{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:08/15/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><reactjs><chart.js><react-chartjs>', 'Title': 'React-Chart.js : How do I increase the space between the legends and chart?', 'ViewCount': 807, 'id': 68788512, 'user_AboutMe': '', 'user_AccountId': 19647813.0, 'user_DisplayName': 'Lucky', 'user_Reputation': 59.0, 'user_Views': 21.0, 'user_id': 14382403.0}}