I have draw a doughnut chart using Chart.js https://www.chartjs.org/docs/latest/charts/doughnut.html and i want to add image (i.e .png .svg) inside of every slice of doughnut chart as well as gradient background color. this goal i want to achieve...image link here
html code here....
<canvas id="myChart" width="600" height="400"></canvas>
js code here
var ctx = $('#myChart');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Instagram: 35% ($38.21, 100 items)',
'Pinterest: 20% ($23.98, 69 items)',
'Direct: 15% ($17.77, 48 items)',
'Facebook: 12% ($13.54, 41 items)',
'Twitter: 10% ($11.02, 35 items)',
'youtube: 8% ($9.63, 21 items)'],
datasets: [{
data: [35, 20, 15, 12, 10, 8],
backgroundColor: [
'#ff0',
'#BD081C',
'#232323',
'#1877F2',
'#1DA1F2',
'#FF0000'
]
}]
},
options: {
rotation:-0.2 * Math.PI,
responsive: false,
scales: {
Axes: [{
gridLines: {
drawBorder: false,
},
}]
},
legend: {
display: true,
position: "right",
align: "center",
onClick: null,
fontSize: 30,
fullWidth:true,
labels: {
fontColor: '#000',
fontSize:16,
padding:30,
}
},
}
});