CODEWITHSUNDEEP
javascriptchart.js
KhanhND
KhanhND

Reputation: 95

Chart.js - Remove empty space in pie chart

In this picture, I have to draw four charts, but there are spaces around the charts, and I don't know how to remove them. 

const chart1 = draw('outlabeledChart1');
const chart2 = draw('outlabeledChart2');
const chart3 = draw('outlabeledChart3');
const chart4 = draw('outlabeledChart4');

function draw(chartID) {
  var chart = new Chart(chartID, {
    type: 'outlabeledPie',
    data: {
      labels: [
        'ONE', 'TWO', 'THREE', 'FOUR', 'FIVE', 'SIX', 'SEVEN', 'EIGHT', 'NINE', 'TEN',
      ],
      datasets: [{
        backgroundColor: [
          '#FF3784', '#36A2EB', '#4BC0C0', '#F77825', '#9966FF', '#00A8C6', '#379F7A', '#CC2738', '#8B628A', '#8FBE00',
        ],
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ]
      }]
    },
    options: {
      aspectRatio: 1,
      plugins: {
        legend: false,
        outlabels: {
          text: '%l: %v',
          color: 'white',
          stretch: 15,
          font: {
            resizable: true,
            minSize: 12,
            maxSize: 18,
          },
        },
        responsive: true,
        maintainAspectRatio: false,
      },
      legend: {
        display: false,
        position: 'top',
        fullWidth: false,
      },
    },
  });
}
<html>

<head>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels'></script>
</head>

<body>
  <div style="width: 820px; display:block; margin-left: auto; margin-right: auto;">
    <div style="display: flex; justify-content: center;">
      <div style="width: 100%; max-height: 100%; border-style: groove;">
        <canvas id='outlabeledChart1'></canvas>
      </div>
      <div style="width: 100%; max-height: 100%; border-style: groove;">
        <canvas id='outlabeledChart2'></canvas>
      </div>
    </div>
    <div style="display: flex; justify-content: center;">
      <div style="width: 100%; max-height: 100%; border-style: groove;">
        <canvas id='outlabeledChart3'></canvas>
      </div>
      <div style="width: 100%; max-height: 100%; border-style: groove;">
        <canvas id='outlabeledChart4'></canvas>
      </div>
    </div>
  </div>
</body>

</html>

enter image description here

Upvotes: 2

Views: 1677

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31431

You can play with the zoomOutPercentage in the root of the options object, by default this is set to 50:

const chart1 = draw('outlabeledChart1');
const chart2 = draw('outlabeledChart2');
const chart3 = draw('outlabeledChart3');
const chart4 = draw('outlabeledChart4');

function draw(chartID) {
  var chart = new Chart(chartID, {
    type: 'outlabeledPie',
    data: {
      labels: [
        'ONE', 'TWO', 'THREE', 'FOUR', 'FIVE', 'SIX', 'SEVEN', 'EIGHT', 'NINE', 'TEN',
      ],
      datasets: [{
        backgroundColor: [
          '#FF3784', '#36A2EB', '#4BC0C0', '#F77825', '#9966FF', '#00A8C6', '#379F7A', '#CC2738', '#8B628A', '#8FBE00',
        ],
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ],
      }]
    },
    options: {
      zoomOutPercentage: 30,
      aspectRatio: 1,
      plugins: {
        legend: false,
        outlabels: {
          text: '%l: %v',
          color: 'white',
          stretch: 15,
          font: {
            resizable: true,
            minSize: 12,
            maxSize: 18,
          },
        },
        responsive: true,
        maintainAspectRatio: false,
      },
      legend: {
        display: false,
      },
    },
  });
}
<html>

<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=Edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels'></script>

  <title>Pie Chart Outlabels</title>
</head>

<body>
  <div style="width: 820px; display:block; margin-left: auto; margin-right: auto;">
    <div style="display: flex; justify-content: center;">
      <div style="width: 100%; max-height: 100%; border-style: groove;">
        <canvas id='outlabeledChart1'></canvas>
      </div>
      <div style="width: 100%; max-height: 100%; border-style: groove;">
        <canvas id='outlabeledChart2'></canvas>
      </div>
    </div>
    <div style="display: flex; justify-content: center;">
      <div style="width: 100%; max-height: 100%; border-style: groove;">
        <canvas id='outlabeledChart3'></canvas>
      </div>
      <div style="width: 100%; max-height: 100%; border-style: groove;">
        <canvas id='outlabeledChart4'></canvas>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions