1

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']

  }];
Giannis
  • 1,790
  • 1
  • 11
  • 29
Star Sb
  • 25
  • 5

1 Answers1

1

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!!

Anglesvar
  • 1,132
  • 8
  • 15