finction
Posts: 7
Joined: Wed Oct 20, 2021 11:27 am

How to access value in dataLabels.formatter

I have a custom formatter function that I want to use to format and display a value in a series' dataLabel. I am using functional components and a functional paradigm in general, so this-keyword is not ideal for me.

With the format property I can access the point value like this:

Code: Select all

dataLabels: {
          format: '<span style="font-size:25px; font-weight: normal">{y:.1f}%</span>',
          borderWidth: 0,
          y: -30
        },
But when I try to use the formatter-property, the object (DataLabelsOptions) that is passed as a parameter to the function doesnt contain value.

Code: Select all

dataLabels: {
    borderWidth: 0,
    y: -30,
    formatter: (object: Highcharts.DataLabelsOptions) => {
            return customFormatter(object.???)
     }
 },
How could I access the value without using 'this' ?
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: How to access value in dataLabels.formatter

Hello,

What is the reason why you don't want to or can't use 'this'? You mention function components, do you use React?
Could you reproduce this in an online editor?

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
finction
Posts: 7
Joined: Wed Oct 20, 2021 11:27 am

Re: How to access value in dataLabels.formatter

michal.f wrote: Tue May 17, 2022 5:03 pm Hello,

What is the reason why you don't want to or can't use 'this'? You mention function components, do you use React?
Could you reproduce this in an online editor?

Best regards!
Thank you for your response and attention:

A minimal repro is here: https://stackblitz.com/edit/react-ts-2t ... =index.tsx

The question is: How can I format the value in the middle of gauge using the customFormatter function, like I did for the yAxis labels?
finction
Posts: 7
Joined: Wed Oct 20, 2021 11:27 am

Re: How to access value in dataLabels.formatter

michal.f wrote: Tue May 17, 2022 5:03 pm Hello,

What is the reason why you don't want to or can't use 'this'? You mention function components, do you use React?
Could you reproduce this in an online editor?

Best regards!
Is it possible that Im thinking wrong about formatting Highcharts' strings? My idea is that since I have created number formatting functions with javascripts Intl-api and use them elsewhere in my apps, that I should also use them with highcharts. I know that I can format values with Highcharts' format strings (such as {point.y:.2f}), but then I'd be using two different solutions for the same problem in my app (Intl AND highcharts format strings) which is not ideal in my opinion.
finction
Posts: 7
Joined: Wed Oct 20, 2021 11:27 am

Re: How to access value in dataLabels.formatter

finction wrote: Wed May 18, 2022 5:54 am
michal.f wrote: Tue May 17, 2022 5:03 pm Hello,

What is the reason why you don't want to or can't use 'this'? You mention function components, do you use React?
Could you reproduce this in an online editor?

Best regards!
Thank you for your response and attention:

A minimal repro is here: https://stackblitz.com/edit/react-ts-2t ... =index.tsx

The question is: How can I format the value in the middle of gauge using the customFormatter function, like I did for the yAxis labels?
I dont use this because its against functional style. This is purely an OOP thing and in my opinion JS / TS is cleaner without this. Some eslint rulesets even give an error for using this in a functional style and if you try using 'this' in my code repro, it will be undefined.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: How to access value in dataLabels.formatter

Hi,
finction wrote: Wed May 18, 2022 5:54 am A minimal repro is here: https://stackblitz.com/edit/react-ts-2t ... =index.tsx

The question is: How can I format the value in the middle of gauge using the customFormatter function, like I did for the yAxis labels?
DataLabels, unlike AxisLabels, does not have a value property but a y property, so in this case it crashes an error.
Demo: https://stackblitz.com/edit/react-ts-eu ... =index.tsx

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
finction
Posts: 7
Joined: Wed Oct 20, 2021 11:27 am

Re: How to access value in dataLabels.formatter

michal.f wrote: Wed May 18, 2022 11:35 am Hi,
finction wrote: Wed May 18, 2022 5:54 am A minimal repro is here: https://stackblitz.com/edit/react-ts-2t ... =index.tsx

The question is: How can I format the value in the middle of gauge using the customFormatter function, like I did for the yAxis labels?
DataLabels, unlike AxisLabels, does not have a value property but a y property, so in this case it crashes an error.
Demo: https://stackblitz.com/edit/react-ts-eu ... =index.tsx

Let me know if you have any further questions!
Best regards!
Thanks! But dataLabels' y is a different thing. It is 'The y position offset of the label relative to the point in pixels.'. It is not the y-value of the point that I actually need.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: How to access value in dataLabels.formatter

Hello,

Yes, you are right. I did not make sure that the data was correct and replied too quickly.

As you look, AxisLabelsFormatterContextObject is a documented interface that is in the API, while DataLabels does not have a documented and public interface, so in the dataLabels.formatter() callback function, the only way to get this value is to use a regular function and use 'this'.

I understand that you take a different approach when writing your code, but you have to be careful that the libraries you use are written differently. Highcharts is object-oriented, in which case only 'this' can be used to get to that value.

Demo: https://stackblitz.com/edit/react-ts-eu ... =index.tsx
API: https://api.highcharts.com/class-refere ... textObject

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”