Chartjs-Fit outlabels to canvas and use different colors chartjs

by

1👍

You can add padding to the layout options and set the out-label color value to an array.

const COLORS = [
  "#2ecc71",
  "#3498db",
  "#95a5a6",
  "#9b59b6",
  "#f1c40f",
  "#e74c3c",
  "#34495e"
];

new Chart(document.querySelector('.chart').getContext('2d'), {
  type: 'pie',
  data: {
    labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
    datasets: [{
      backgroundColor: COLORS,
      data: [12, 19, 3, 17, 28, 24, 7]
    }]
  },
  options: {
    layout: {
        padding: 50
    },
    legend: {
      display: false
    },
    plugins: {
      outlabels: {
        backgroundColor: null,
        color: COLORS,
        stretch: 30,
        font: {
          resizable: true,
          minSize: 15,
          maxSize: 20,
        },
        zoomOutPercentage: 100,
        textAlign: 'start',
        backgroundColor: null
      }
    }
  }
});
body { background: #111; }
.doughnut-canvas-container { background: #FFF; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels@0.1.4/dist/chartjs-plugin-piechart-outlabels.min.js"></script>
<div class="doughnut-canvas-container">
  <canvas class="chart" class="chartjs-render-monitor"></canvas>
</div>

Leave a comment