ctaneja
Posts: 22
Joined: Wed Aug 31, 2022 5:07 am

Angular: use custom function in formatter and best practice to model the code

Hi,
I have 2 questions.
1. How can I put in a function as a value to the datalabels.formatter function rather than defining the function right there? I want to use it like below:

Code: Select all

formatter: this.myCustomFunction();
. where myCustomFunciton() will have all the logic for formatter. I tried using DataLabelsFormatterCallbackFunction but was not able to fulfill my requirement.
2. I would like to know the best practice to create a chart in Highcharts which makes my code more reusable and robust in Angular. Should I create the chartOptions in a service altogether and create a data modal for it too.
Link to the stackblitz: https://stackblitz.com/edit/angular-ivy ... mponent.ts
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Angular: use custom function in formatter and best practice to model the code

Hi ctaneja!
Thanks for contacting us with your question!

1) If you want to use a custom external function you can do it as in the demo below. You cannot bind this function directly with this due to bad context.

Demo: https://stackblitz.com/edit/angular-ivy-dxnwvj

2) Our Angular wrapper shows good practice for using Highcharts in Angular. How to import, update and how use the service to manage data, the whole project can be split into components in one can be a chart in another setting for charts. You can find more here: https://github.com/highcharts/highchart ... e-examples

Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”