How to Show percentage in doughnutChart Piechat in Ionic2

Question

I am Beginner in Ionic 2. I am using Chart.js Library to show pie chart in Hybrid mobile Application.

I have successfully show data in pie chart but its show numbers,I want to show percentage instead of numbers.

This is my code

this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
    
 type: 'doughnut',

           
data: {
                labels: data1, //data1 contains [100 ,50 ,200 ,500 ,60]
                
                datasets: [{
                    label: '# of Votes',
                    data: data2, //data2 contains [Gerberea,Lili,Rose,Sunflower,Lotus]

                    backgroundColor: [
                        'rgba(0, 99, 132, 0.2)',
                        'rgba(25, 162, 235, 0.2)',
                        'rgba(50, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(100, 102, 255, 0.2)',
                        'rgba(125, 159, 64, 0.2)'
                    ],
                    hoverBackgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56",
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ]
                }]
                
                }
    });

You can use `tooltips` in `options`,Just calculate percentage in that and show as `label`. Check below answer hope this helps you — Yogen Darji, Jul 24 '17 at 12:06

score 0 · Answer 1 · answered Jul 24 '17 at 09:50

Use tooltips in options, you can calculate percentage in that and show as label.

 options: {
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
          var dataset = data.datasets[tooltipItem.datasetIndex];
        var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
          return previousValue + currentValue;
        });
        var currentValue = dataset.data[tooltipItem.index];
        var precentage = ((currentValue/total) * 100).toFixed(2);         
        return precentage + "%";
      }
    }
  }
}

Demo sample

var config = {
  type: 'doughnut',
  data: {
    labels: ['Gerberea', 'Lili', 'Rose', 'Sunflower', 'Lotus'],

    datasets: [{
      label: '# of Votes',

      data: [100, 50, 200, 500, 60],
      backgroundColor: [
        'rgba(0, 99, 132, 0.2)',
        'rgba(25, 162, 235, 0.2)',
        'rgba(50, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(100, 102, 255, 0.2)',
        'rgba(125, 159, 64, 0.2)'
      ],
      hoverBackgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56",
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ]
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var dataset = data.datasets[tooltipItem.datasetIndex];
          var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
            return previousValue + currentValue;
          });
          var currentValue = dataset.data[tooltipItem.index];
          var precentage = ((currentValue / total) * 100).toFixed(2);
          return precentage + "%";
        }
      }
    }
  }
};


var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx, config); {

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script>

<canvas id="chart-area" />

How to Show percentage in doughnutChart Piechat in Ionic2

1 Answers1