pie-chart's `labelFormatting` implemented with different functionality than number-card and tree-map

I’m submitting a … (check one with “x”)

[ X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior labelFormatting function for number-card and tree-map allows for formatting a label using ‘label’ and ‘value’ fields in a html string. Eg, modified from demo/app.component.ts, line 552

  gdpLabelFormatting(c) {
    return `label=${c.label}<br/><small class="number-card-label">value=${c.value}</small>`;
  }

labelFormatting function for pie-chart only has access to the ‘label’ field (ie., no access to the ‘value’ field), does not allow inserting html into the formatted return string, uses a fixed maximum width for the formatted label, and forces CAPS for the labels.

Expected behavior labelFormatting functionality should be consistent across components.

Reproduction of the problem Tried implementing the following, then researched code and saw that the pie-chart labelFormatting is implemented differently from number-card and tree-map.

<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;
}

What is the motivation / use case for changing the behavior? It should be possible to print any chart with enough information to convey the meaning of the chart. For pie-charts, in order for the full meaning of the chart to be represented in a printout, they need to show both the ‘label’ and ‘value’ fields for each slice. An implementation of labelFormatting similar to tree-map and number-card would allow the consuming app to format the labels such that all relevant information is visible on a hard-copy printout.

Please tell us about your environment: MacOs, WebStorm, Webpack (development environment)

• ngx-charts version: [6.0.0]

• Angular version: 4.1.2

• Browser: [all]

• Language: [TypeScript 2.2.2]

[dolthead]

Also any html in this returned string is displayed as plain text. setLabelFormatting(label): string { return '<span class="pie-label-text">${label}</span>'; }

[elkano91]

Hi, this workaround works find in my project:

var item {}; item['value']=myvalue; item['name']= 'myname'+ ' (' + String(myvalue) + ')';

Not ideal but at least values are added close to my label which is what I wanted.