ngx-charts icon indicating copy to clipboard operation
ngx-charts copied to clipboard

valueFormatting dosen't work

Open yairBepr opened this issue 3 years ago • 6 comments

Hi! I using in Advanced Pie Chart. I added valueFormatting function and it work in stackblitz of the exmple https://stackblitz.com/edit/swimlane-pie-chart-advanced-avyv8h?embed=1&file=app/app.component.ts but it dosen't work in my computer.

HTML: image

TS: image

In fact in HTML: image

ngx-charts version @swimlane/ngx-charts": "^19.1.0"

Thanks.

yairBepr avatar Nov 01 '21 09:11 yairBepr

Seems right. Have you tried using arrow functions for callback?

  formator = (val) => {
    let formatter = new Intl.NumberFormat('ILS', {
      style: 'currency',
      currency: 'ILS'
    });
    return formatter.format(val)
  }

image

Nurech avatar Nov 02 '21 03:11 Nurech

Thank you, I'm tried, it dosn't matter.

yairBepr avatar Nov 03 '21 07:11 yairBepr

I also have the same problem! I use the same arrow function in multiple graphs and the valueFormatting property is not working in the advanced pie chart.

ruifelizardo-affinity avatar Dec 13 '21 15:12 ruifelizardo-affinity

I was using a function to update the data, and the formatting just doesnt work on the first load, when updating the data it starts working.

ruifelizardo-affinity avatar Dec 14 '21 09:12 ruifelizardo-affinity

You can fix this problem if you put [animations]="false" in HTML.

Nagi-ta avatar Jun 27 '22 00:06 Nagi-ta

I'm currently facing the same problem. However, I observed that this erroneous behaviour only occurs if your results-array was empty before you set your data for the chart.

Here an example:

  • If i change the my result-array from [] to [{name: 'Protein', value: 30},{name:'Fat',value:20,}] the valueFormatting method doesn't get called.
  • If i change the my result-array from [{name: 'Protein', value: 30},{name:'Fat',value:20,}] to [{name: 'Protein', value: 50},{name:'Fat',value:40,}] the valueFormatting method gets called and the format change will be visible in the chart.

A possible workaround, if you're hesitant to set animations to false, would be to set your result-array to a slightly altered version of your desired values (I substracted 1 from all values of my result-array), then trigger a change detection with this.changeDetectorRef.detectChanges() and finally set your result-array to your desired values. Such a change should be unnoticeable in the animation of the values in the legend.

adrienunger avatar Sep 03 '22 18:09 adrienunger