CODEWITHSUNDEEP
javascriptlayoutchartschart.js
Kaja S.
Kaja S.

Reputation: 43

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
        },
      },
    },

Upvotes: 1

Views: 2243

Answers (2)

Sjors Broersen
Sjors Broersen

Reputation: 29

ChartJs4 - plugin

const legend_padding = {
    id: 'legend_padding',
    afterInit: function (chart) {
        const padding = {
            ...this.defaults,
            ...chart.config.options.plugins.legend_padding,
        };
        const legendPos = chart.config.options.plugins.legend.position;

        const origFit = chart.legend.fit;
        chart.legend.fit = function fit() {
            origFit.bind(chart.legend)();
            this.width += padding.left + padding.right;
            this.height += padding.top + padding.bottom;
        };

        const _origDraw = chart.legend._draw;
        chart.legend._draw = function _draw() {
            _origDraw.bind(chart.legend)();

            if (legendPos == 'left') {
                this.left = 0 + padding.left;
                this.right = 0 + this.width + padding.right;
            }

            if (legendPos == 'right') {
                this.left = chart.width - this.width + padding.left;
                this.right = chart.width - padding.right;
            }
            if (legendPos == 'top') {
                this.top = 0 + padding.top;
                this.bottom = 0 + this.height + padding.top;
            }

            if (legendPos == 'bottom') {
                this.top = chart.height - this.height + padding.top;
                this.bottom = chart.height - padding.bottom;
            }
        };
    },
    defaults: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
    },
};

usage

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

const options = {
    plugins: {
        legend_padding: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
        },
    },
};

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

Upvotes: -1

winner_joiner
winner_joiner

Reputation: 14870

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>

Upvotes: 3

Related Questions