Chartjs-Padding Between Pie Charts in chart js

by

2👍

✅

You can obtain the desired result by adding an empty dataset between the two existing ones and defining a weight property on the empty and the inner dataset.

const colors = ["#FF6384", "#36A2EB", "#FFCE56"];
var pieChart = new Chart("myChart", {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{      
      data: [8, 5, 6],
      backgroundColor: colors,
    }, 
    { 
      weight: 0.2
    },
    { 
      data: [5, 7, 4],
      backgroundColor: colors,
      weight: 1.2
    }]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment