ChartJS: How to Increase the space from the chart and the labels above?

I would like to increase the space between the Chart itself and the labels above it with a Chart Code I got from ChartJs. The chart is a polarareachart which has labels above.

Somewhere I read that this doesn't work. Is that true? Or can somebody help my with that? I am new to JavaScript and only know the basics :(

I also already had a look at the youTube Channel of ChartJS but couldn't find anything about it.

updated version of fiddle: https://jsfiddle.net/63c5mf1t/1/

Already tried this:

const options = {
    layout: {
      padding: {
        top: 30, // Hier kannst du den gewünschten Abstand einstellen
      },
    },

const options = {
    plugins: {
      tooltip: {    // Pop-Up Einstellungen
        backgroundColor: '#78a2d3' // Hintergrund
      },
      legend: {
        position: 'top',
        labels: {
          color: '#ffffff', // Labels über dem Chart, Schriftfarbe weiß
          padding: 20, // Abstand zwischen den Labels selbst
        },
      },
    },

Solution

As far as I know you can't do this out-of-the-box. The official documentation, on the legend plugin states at the end of all properties:

... If you need more visual customizations, please use an HTML legend.

With this you should beable to do all the formating you need (with html, js and css).

Update:

(Of course you could use a different plugin, or code your own.)

In the following demo, I combined the code of the video (you posted in the comment) with your demo code:

Here the demo:
(I stripped all properties, lines of code, that are not relevant for the example, to keep it small and lean.)

// - START - custom plugin 
  const legendMargin = {
      id: 'legendMargin',
      beforeInit(chart, legend, options){
          let fitValue = chart.legend.fit;
          chart.legend.fit = function fit(){
              fitValue.bind(chart.legend)();
              return this.height += options.paddingTop;
          }
      },
      defaults: {
          paddingTop: 0 // <-- default padding
      }
  };
// - END - custom plugin 

  const chartData = {
    2010: [107, 90, 200],
  };

  const data = {
    datasets: [{
      data: [107, 500, 200],
      // ...
    }],
    labels: ['Red', 'Orange', 'Yellow'],
  };

  const options = {
    plugins: {
      legendMargin: {  // <-- Set option of custom plugin
        paddingTop: 50 // <---- override the default value
      },
      // ...
    },
    // ...
  };

const chart = document.getElementById('chart1');
new Chart(chart, {
  type: 'polarArea',
  data: data,
  options: options,
  plugins: [legendMargin],  // <-- Add custom plugin
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div style="width:500px;height:350px">
   <canvas id="chart1" ></canvas>
<div>