Show only lebels of those percentage in piechart which is greater than 5% in Chart JS-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

You can calculate the sum using the reduce method and then use filter to check if percentage is greater than 5. You can pass the result array to the chart.

let yValues = [2, 100, 223, 84, 197,3,8,7,50];
let sum = yValues.reduce((sum, item) => sum   item, 0)
let result = yValues.filter(value => {
    let percentage = ( value / sum ) * 100;
    if ( percentage > 5 ) return true;
    else false;
})