Menu
I am learning web dev and chart js, and working with pie chart. my chart looks like below; As we can see smaller percentage value is not at all visible and is making our website bad. how can we eliminate smaller percentage. I am attaching my work how I got below pie chart. kinly looking for help. Thanks.
Edit: By showing a percentage greater than 5% I meant, the percentage value to be written only on area greater than 5%. data with less than 5% should also be present in pie chart, but don't show the percentage labels.
<!DOCTYPE html>
<html>
<head>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
-->
<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/[email protected]"></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>
940
you have to change the formatter function , it should return a value only if the percentage is greater than 5
<!DOCTYPE html>
<html>
<head>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
-->
<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/[email protected]"></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 > 5 ? 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
