title: Chartjs: I only want left and right padding in pie chart
body: <p>I have a case at work where I want to use a pie chart. For this I use Chart.js (with react-chartjs-2 library as a wrapper).</p>
  <p>I would like to have padding left and right in the canvas, but for some reason I always get top padding as well in that case, even when I specifically type top: 0. Does anyone know why this happens and what would be a way to have only padding left and right?</p>
  <pre><code>const options = {
    layout: {
      padding: {
        left: 100,
        right: 100,
        top: 0,
      }
    }
  }
  </code></pre>
  <p>Code is below and Code Sandbox is added as well:</p>
  <p><a href="https://codesandbox.io/s/exciting-stallman-x18qku?file=/src/App.js:0-1120" rel="nofollow noreferrer">https://codesandbox.io/s/exciting-stallman-x18qku?file=/src/App.js:0-1120</a></p>
  <p><a href="https://i.stack.imgur.com/E6aQj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E6aQj.png" alt="enter image description here" /></a></p>
  <pre><code>    import &quot;./styles.css&quot;;
  import { Box } from &quot;@mui/material&quot;;
  import { Chart as ChartJS, ArcElement, Tooltip, Legend } from &quot;chart.js&quot;;
  import { Pie } from &quot;react-chartjs-2&quot;;
  
  ChartJS.register(ArcElement, Tooltip, Legend);
  
  export const data = {
    labels: [&quot;Red&quot;, &quot;Blue&quot;, &quot;Yellow&quot;, &quot;Green&quot;, &quot;Purple&quot;, &quot;Orange&quot;],
    datasets: [
      {
        label: &quot;# of Votes&quot;,
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          &quot;rgba(255, 99, 132, 0.2)&quot;,
          &quot;rgba(54, 162, 235, 0.2)&quot;,
          &quot;rgba(255, 206, 86, 0.2)&quot;,
          &quot;rgba(75, 192, 192, 0.2)&quot;,
          &quot;rgba(153, 102, 255, 0.2)&quot;,
          &quot;rgba(255, 159, 64, 0.2)&quot;
        ],
        borderColor: [
          &quot;rgba(255, 99, 132, 1)&quot;,
          &quot;rgba(54, 162, 235, 1)&quot;,
          &quot;rgba(255, 206, 86, 1)&quot;,
          &quot;rgba(75, 192, 192, 1)&quot;,
          &quot;rgba(153, 102, 255, 1)&quot;,
          &quot;rgba(255, 159, 64, 1)&quot;
        ],
        borderWidth: 1
      }
    ]
  };
  
  const options = {
    layout: {
      padding: {
        left: 100,
        right: 100,
        top: 0,
      }
    }
  }
  
  export default function App() {
    return (
      &lt;Box&gt;
        &lt;Pie data={data} options={options} /&gt;
      &lt;/Box&gt;
    );
  }
  </code></pre>