I have a pie chart, on which I would like to put the percentage of slices
function createChart(ctx,config){
Chart.defaults.font.size = 13;
Chart.defaults.color="#fff";
Chart.defaults.elements.line.cubicInterpolationMode="default";
//Chart.register(ChartDataLabels);
new Chart(ctx, config);
}
function setConfig(data,labeles,config,date){
colors=['#b30000','#7c1158','#4421af','#1a53ff','#0d88e6','#00b7c7','#5ad45a','#8be04e'];
config.data.labels= labeles;
let total = 0;
if (config.type === 'pie') {
ar = [];
for (i in data) {
ar.push(data[i][data[i].length - 1]);
}
config.data.datasets.push({
label:' €',
data: ar,
borderColor: colors,
backgroundColor: colors,
})
} else if (config.type === 'line') {
config.data.labels = date;
for (let i in data) {
config.data.datasets.push({
label: labeles[i],
data: data[i],
fill: false,
borderColor: colors[i],
backgroundColor: colors[i],
borderWidth: 4,
pointHoverRadius: 6,
pointHoverBorderWidth: 4,
pointHoverBackgroundColor: '#282c34',
tension: 0.1
})
}
}
return config
}
const configPie1={
type: 'pie',
data: {
datasets:[]
},
options: {
maintainAspectRatio: false,
responsive: true,
},
};
This is the code I use in the index.html to display it (I won't report the implemented libraries)
<div class="col-sm-4" style="height: max-content; margin-top: 12px; background-color: #7F6951;
border- radius: 5px;">
<canvas id="PieChart" style="display: block; box-sizing: border-box; padding-bottom: 12px;
padding-top: 12px; padding-left: 12px; padding-right: 12px;"></canvas>
</div>
<script>
const ctx = document.getElementById('PieChart');
createChart(ctx,setConfig({{valori}},
{{data|tojson}},configPie1{{time|tojson}}));
I put the picture with the result
I tried using some plugins or formulas but I couldn't get them to work with any method found. I wish I had the percentage written inside the pie slices, Thanks in advance.