I'm currently diving into web development along with learning Chart.js and pie charts. In my project, the pie chart I've created displays smaller percentage values that are hardly visible, resulting in a poor user experience on our website. How can I address this issue and eliminate the display of smaller percentages? Please see below for the code snippet where I generated the problematic pie chart; any guidance or assistance would be greatly appreciated. Thank you.
Edit: To clarify, when I mentioned showing only percentages greater than 5%, I mean that the percentage labels should be displayed only on sections representing more than 5% of the total data. Data points with less than 5% should still be included in the pie chart, but their corresponding percentage values should not be shown.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27444f4655534d540a574b52404e490a434653464b4645424b54671709100917">[email protected]</a>"></script>
</head>
<body>
<canvas id="myChart1" width="90" height="90" style="width:100%;max-width:650px"></canvas>
<script>
function getColors(length) {
let pallet = ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"];
let colors = [];
for (let i = 0; i < length; i++) {
colors.push(pallet[i % (pallet.length - 1)]);
}
return colors;
}
var xValues = ['Multimeter', 'UniBox', 'Toby', 'Cables', 'Test','nokia','samsung','Jio','honda'];
var yValues = [2, 100, 223, 84, 197,3,8,7,50];
var barColors = getColors(xValues.length);
var ctx = document.getElementById("myChart1").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
options:{
tooltips: {
enabled: true
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
let sum = ctx.dataset._meta[0].total;
let percentage = (value * 100 / sum).toFixed(2) + "%";
return percentage;
},
color: '#fff',
}
},
"legend": {
"display": true,
"labels": {
"fontSize": 20,
}
},
title: {
display: true,
fontColor: 'rgb(255, 0, 0)',
fontSize: 25,
text: "Current Inventory Received"
}
}
});
</script>
</body>
</html>