For my project, I have been utilizing chart js to create visually appealing charts. Currently, I am faced with the task of drawing a pie chart within a donut chart similar to this example: https://i.sstatic.net/AO0os.png
The data in the donut chart is not dependent on the data within the pie chart that it contains. Additionally, color selection is not crucial for this particular visualization. Does anyone have any innovative ideas on how to achieve this?
As of now, I can only generate the pie chart and the donut chart separately.
function drawOperatorStatusChart(labels, data, title, colors) {
new Chart(document.getElementById("pie_chart_operator"), {
type: 'pie',
data: {
labels: labels,
datasets: [{
label: data,
backgroundColor: colors,
data: data
}]
},
options: {
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
return secondsToHHMMSS(data['datasets'][0]['data'][tooltipItem['index']]);
}
}
},
title: {
display: true,
text: title
}
}
});
}
function drawReportDetailedDoughnutChart(labels, data, title, colors) {
var ctx = document.getElementById('operator_detailed_doughnut_chart').getContext('2d');
new Chart(ctx, {
type: 'doughnut',
data: {
labels: labels,
datasets: [{
label: "",
backgroundColor: colors,
data: data
}]
},
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: title
},
animation: {
animateScale: true,
animateRotate: true
}
}
});
}