Need Help - Apex doughnut chart - set fixed value in label - Angular?

Question

I am trying to bring APEX Doughnut chart in Angular 11x app, but cannot understand the documentation.

I am unable to remove the % value and set a fixed value in doughnut chart, nor able to set colors.

 <apx-chart 
[series]="chartOptions.series" 
[chart]="chartOptions.chart" 
[labels]="chartOptions.labels" 
[responsive]="chartOptions.responsive" 
[legend]="chartOptions.legend">
</apx-chart>






export type ChartOptions = {
      series: ApexNonAxisChartSeries;
      chart: ApexChart;
      responsive: ApexResponsive[];
      labels: any;
      legend: ApexLegend;
      formatLabels: ApexDataLabels;
    //  formatLabels: any;
    };
    
    @ViewChild('chart') chart: ChartComponent; public chartOptions: Partial<ChartOptions>;
    
    loadChart(): void{
    
    this.chartOptions = {
          series: [45, 52, 22, 51, 30, 48],
          chart: {
            type: 'donut',
            width: '270px'
          },
         labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E', 'Team F'],
         color: ['#DFFF00', '#FFBF00', '#FF7F50', '#DE3163', '#9FE2BF'] // cant change default  color
          responsive: [
            {
              breakpoint: 480,
              options: {
                chart: {
                  width: 100,
                },
              }
            }
          ],
          legend: {
            show: true,
            position: 'bottom',
            horizontalAlign: 'center'
          },
          formatLabels: { // it's not helping to remove % from chart
            formatter(value: any): any {
              return value;
            },
          }
        };
    }

I followed this document to format the value, but it seems that I am implementing it incorrectly. No error is thrown.

How can I display 19 rather than 19.4%, i.e. remove the %?

Answer 1

Modification -

1. Use dataLabels instead of formatLabels to modify pie data.
2. Use colors instead of color to modify pie colours.

---

HTML part -

<apx-chart 
    [series]="chartOptions.series" 
    [chart]="chartOptions.chart" 
    [labels]="chartOptions.labels" 
    [responsive]="chartOptions.responsive" 
    [legend]="chartOptions.legend"
    [dataLabels]="chartOptions.dataLabels"
    [colors]="chartOptions.colors">
</apx-chart>

TS part -

import {
    ApexNonAxisChartSeries,
    ApexResponsive,
    ApexChart,
    ApexLegend,
    ApexDataLabels
} from "ng-apexcharts";

export type ChartOptions = {
    series: ApexNonAxisChartSeries;
    chart: ApexChart;
    responsive: ApexResponsive[];
    labels: any;
    legend: ApexLegend;
    dataLabels: ApexDataLabels; // add this
    color: any[]; // add this
};

@Component({...})

export class AppComponent {
    @ViewChild("chart") chart: ChartComponent;
    public chartOptions: Partial<ChartOptions>;

    this.chartOptions = {
      series: [45, 52, 22, 51, 30, 48],
      chart: {
        type: 'donut',
        width: '270px'
      },
      labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E', 'Team F'],
      colors: ['#DFFF00', '#FFBF00', '#FF7F50', '#DE3163', '#9FE2BF', '#000000'], // add this part to modify colours
      responsive: [
        {
          breakpoint: 480,
          options: {
            chart: {
              width: 100,
            },
          }
        }
      ],
      legend: {
        show: true,
        position: 'bottom',
        horizontalAlign: 'center'
      },
      dataLabels: { // add this part to remove %
        enabled: true,
        formatter(value: any, opts: any): any {
          return opts.w.config.series[opts.seriesIndex];
        },
      }
    };
}

---

Output -