Using labelFormatting in ngx-chart pie

Question

The pie chart in ngx-chart shows only the name of the data record as the label, but I want to also display its value in the label. I saw that it should be possible to change the label format with labelFormatting, but there is no example provided in the documentation.

Answer 1

You can access to your chartData from within your labelFormatting method on the series property. You can achieve it with following code:

  // your chartData maybe like this
  chartData = [
    { name: "Prod 1", value: 22 },
    { name: "Prod 2", value: 11 },
    { name: "Prod 3", value: 33 }
  ];
  

  labelFormatting(name) { // this name will contain the name you defined in chartData[]
    let self: any = this; // this "this" will refer to the chart component (pun intented :))

    let data = self.series.filter(x => x.name == name); // chartData will be present in
                                                        // series along with the label

    if(data.length > 0) {
      return `${data[0].name}: ${data[0].value}`;
    } else {
      return name;
    }
  }

HTML will be like this:

    <ngx-charts-pie-chart 
        [results]="chartData"
        [legend]="false"
        [view]="[275,250]"
        [animations]="true"
        [labels]="true"
        [labelFormatting]="labelFormatting">
     </ngx-charts-pie-chart>

Note: I am using ngx-charts version 16.0.0

Answer 2

You can format the label if you set a function to the labelFormatting input of the chart component as shown below:

 <ngx-charts-pie-chart
    [results]="yourData"
    [labelFormatting]="myLabelFormatter"   
  ></ngx-charts-pie-chart>

The ngx chart component calls the linked function with each label value as a argument. In the formatting function you can manipulate the label value and must return a value that is then placed as label text, see example formatting function that adds a percentage symbol to the original label text:

public myLabelFormatter(ev) {
   return ev + '%';
}

Answer 3

Javascript Array.prototype.find() worked for me:

/* 
import { SingleSeries } from @swimlane/ngc-charts/lib/models/chart-data.model

export interface SingleSeries extends Array<DataItem> {}

export interface DataItem {
    name: StringOrNumberOrDate;
    value: number;
    extra?: any;
    min?: number;
    max?: number;
    label?: string;
}
*/

var chartData: SingleSeries = 
  [
    { name: 'First', value: 10 },
    { name: 'Second', value: 50 },
    { name: 'Third', value: 30 },
    { name: 'Fourth', value: 10 }
  ]

function labelFormat = (labelName) => {
    //Find the data by labelName from chartData 
    const dataPoint = this.chartData.find(x => x.name === labelName);
    
    //returns 10% for 'First' label, 50% for 'Second' label and so on.
    return `${dataPoint.value}%`;
}

<ngx-charts-pie-chart
  [results]="chartData"
  [labels]="true"
  [labelFormatting]="labelFormat">
</ngx-charts-pie-chart>

Answer 4

Is an example on how to implement [labelFormatting]="....." functionality for pie-chart. I tried implementing (below) on pie-chart:

   <ngx-charts-pie-chart
        [results]="chartData"
        [view]="view"
        [labelFormatting]="setLabelFormatting"   
      ></ngx-charts-pie-chart>

where:

  setLabelFormatting(c): string {
    return `${c.label}<br/><span class="custom-label-text">${c.value}</span>`;
  }

and:

.custom-label-text {
  background-color: #00b400;
  color: #fff;
}