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

by

0👍

✅

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>

Leave a comment