const imageURLs = [
'https://i.sstatic.net/2RAv2.png',
'https://i.sstatic.net/Tq5DA.png',
'https://i.sstatic.net/3KRtW.png',
'https://i.sstatic.net/iLyVi.png'
];
const images = imageURLs.map(v => {
var image = new Image();
.src = v;
return image;
});
new Chart('myChart', {
type: 'pie',
plugins: [{
afterDatasetsDraw: chart => {
var ctx = chart.ctx;
ctx.save();
var xCenter = chart.canvas.width / 2;
var yCenter = chart.canvas.height / 2;
var data = chart.config.data.datasets[0].data;
var vTotal = data.reduce((a, b) => a + b, 0);
data.forEach((v, i) => {
var vAngle = data.slice(0, i).reduce((a, b) => a + b, 0) + v / 2;
var angle = 360 / vTotal * vAngle - 90;
var radians = angle * (Math.PI / 180);
var r = yCenter;
var x = xCenter + Math.cos(radians) * r / 2;
var y = yCenter + Math.sin(radians) * r / 2;
ctx.translate(x, y);
var image = images[i];
ctx.drawImage(image, -image.width / 2, -image.height / 2);
ctx.translate(-x, -y);
});
ctx.restore();
}
}],
data: {
labels: ['red vans', 'blue vans', 'green vans', 'gray vans'],
datasets: [{
label: 'My Dataset',
data: [48, 56, 33, 44],
backgroundColor: ['rgba(255, 0, 0, 0.4)', 'rgba(0, 0, 255, 0.4)', 'rgba(0, 255, 0, 0.4)', 'rgba(124, 124, 124, 0.4)']
}]
},
options: {
responsive: false,
plugins: {
legend: {
display: false
}
},
scales: {
ticks: {
display: false
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.1/chart.min.js"></script>
<canvas id="myChart" width="250"></canvas>