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>
- Chartjs-Can i use crosshairs with OHLC/candlestick charts using ChartJS
- Chartjs-How do I render PyChart.JS charts in web2py?
Source:stackexchange.com