0๐
โ
I think you could add 2 datasets, 1 grouped and 1 with all values.
To show the labels, you can use https://github.com/chartjs/chartjs-plugin-datalabels/.
const multiLeveData = {
firstLevel: {
data: [15, 10]
},
secondLevel: {
data: [20, 30]
},
};
const dataForDataset = function(grouped) {
const result = [];
for (const key of Object.keys(multiLeveData)) {
if (grouped) {
result.push(multiLeveData[key].data.reduce(function(a, b) { return a + b; }, 0));
} else {
multiLeveData[key].data.forEach(function(item){
result.push(item);
})
}
}
return result;
}
const ctx = document.getElementById("myChart");
Chart.register(ChartDataLabels);
const myChart = new Chart(ctx, {
type: "doughnut",
data: {
datasets: [
{
label: "Some metric",
backgroundColor: [
"#619E98",
"#619E98",
"#7D35CA",
"#7D35CA"
],
borderWidth: 1,
borderRadius: 5,
offset: [0, 0, 0, 0, 0, 0, 0],
cutout: "50%",
data: dataForDataset(),
},
{
label: "Some metric",
backgroundColor: "#4164BE",
borderWidth: 1,
borderRadius: 5,
offset: [0, 0, 0, 0, 0, 0, 0],
cutout: "50%",
data: dataForDataset(true),
},
],
},
options: {
plugins: {
legend: {
display: false,
},
tooltip: {
display: false,
},
title: {
display: true,
text: "Tag Distrubution by Class",
color: "black",
},
datalabels: {
color: 'white',
font: {
size: 16
}
}
},
layout: {
padding: 10,
},
maintainAspectRatio: true,
responsive: true,
},
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.1.0/dist/chartjs-plugin-datalabels.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400" tabindex="1"/>
</div>
</body>
</html>