CODEWITHSUNDEEP
angularchart.js
Star Sb
Star Sb

Reputation: 25

How to customize percentage label in Doughnutchart ng2 chart.js

In Doughnut chart that value of percentage should be customized like this

This is my doughnut chart look like this

Is there any way for doing this in ng2 charts?

There are my code I used

public barChartType: ChartType = 'doughnut';

  public barChartData: ChartDataSets[] = [
    { data: [20,20,30] }
  ];
  public barChartOptions: ChartOptions = {
    responsive: false,
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    plugins: {
      labels: false
    },
    showLines: false,
    cutoutPercentage: 70,
  };
  public doughnutChartColors2: Array<any> = [{
    backgroundColor: ['#58dfa7']

  }];

Upvotes: 1

Views: 1917

Answers (1)

Anglesvar
Anglesvar

Reputation: 1154

You can convert the values to percentage and then format the data with % and pass it to the chart. Or you can use plugin like this, Example

var options = {
    tooltips: {
        enabled: false
    },
    plugins: {
        datalabels: {
            formatter: (value, ctx) => {
                let sum = 0;
                let dataArr = ctx.chart.data.datasets[0].data;
                dataArr.map(data => {
                    sum += data;
                });
                let percentage = (value*100 / sum).toFixed(2)+"%";
                return percentage;
            },
            color: '#fff',
        }
    }
};

Refer Show Percentile values in DoughnutChart . Happy Coding!!

Upvotes: 1

Related Questions