ngx-charts
ngx-charts copied to clipboard
valueFormatting dosen't work
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:
TS:
In fact in HTML:
ngx-charts version @swimlane/ngx-charts": "^19.1.0"
Thanks.
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)
}
Thank you, I'm tried, it dosn't matter.
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.
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.
You can fix this problem if you put [animations]="false" in HTML.
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.