Remove space between chart js legend and chart

Viewed 38

How do I remove this space between the legend of this chart and the chart it self

If I change the size it just breaks the diagram :(.

JSFiddle: https://jsfiddle.net/ucs8ybLg/14/

image of the space between label and diagram

Code for the diagram

const config = { 
type: 'radar',
data: data,

  options: {
    elements: {
      line: {
        borderWidth: 2
      }
    },
    scales: {
        r: {
            suggestedMin: 0,
            suggestedMax: 10
        }
    }
  },
};

const data = {
  labels: [
    'Problemlösung',
    'Ausdauer',
    'Selbstständigkeit',
    'Zuverlässigkeit',
    'Reflexionsfähigkeit',
    'Teamwork',
    'Respektvoller Umgang',
    'Pflichtbewusstsein'
  ],

  datasets: [{
    label: 'Schüler',
    data: [10, 8, 6, 7, 5, 10, 5, 6],
    fill: true,
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgb(255, 99, 132)',
    pointBackgroundColor: 'rgb(255, 99, 132)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(255, 99, 132)'
  },
  {
    label: 'Lehrer',
    data: [8, 10, 7, 7, 3, 9, 8, 7],
    fill: true,
    backgroundColor: 'rgba(54, 162, 235, 0.2)',
    borderColor: 'rgb(54, 162, 235)',
    pointBackgroundColor: 'rgb(54, 162, 235)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(54, 162, 235)'
  }]
};

Thank you very much for the help!

1 Answers

You can explicitly define options.aspectRatio in order to change the width / height ratio of the chart.

options: {
  aspectRatio: 1.5,
  ...

for more information, please consult Configuration Options from the Chart.js documentation

Related