mk.developer
Posts: 83
Joined: Wed Mar 17, 2021 6:07 pm

Change menuItemDefinitions text on click event

I would like to change exporting.menuItemDefinitions.label's text from "Show Label" to "Hide Label" when user clicks on it.

https://jsfiddle.net/wx1spb4k/

I tried this.text = "Hide Label" but it does not work.

Also, is there anyway to add font awesome icon with the text "Show Label"?

Code: Select all

label: {
                onclick: function () {
                   this.text = "Hide Label";
                    this.renderer.label(
                        'You just clicked a custom menu item',
                        100,
                        100
                    )
                        .attr({
                            fill: '#a4edba',
                            r: 5,
                            padding: 10,
                            zIndex: 10
                        })
                        .css({
                            fontSize: '1.5em'
                        })
                        .add();
                },
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Change menuItemDefinitions text on click event

Hi mk.developer,

Thanks for contacting us with your question.

To change that text you can use chart.exporting.update() function. In the demo you will find an example how to add FA icons.
Demo: https://jsfiddle.net/BlackLabel/8u06nvL2/

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer
mk.developer
Posts: 83
Joined: Wed Mar 17, 2021 6:07 pm

Re: Change menuItemDefinitions text on click event

That's great, it is very useful. Thank you so much.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Change menuItemDefinitions text on click event

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer
mk.developer
Posts: 83
Joined: Wed Mar 17, 2021 6:07 pm

Re: Change menuItemDefinitions text on click event

Can I please ask a follow up question?

I am trying to set a flag on click of a context menu item, the flag will determine either to show values in dollars or pounds inside an angular application.

I tried the following code but it does not work as expected. Do you have a similar working example?

Code: Select all

exporting: {
        menuItemDefinitions: {
          // Custom definition
          changeNumberFormat: {
            onclick: () => {
              const chart = this.chartRef as any;
              chart.valuesInPoundsFlag = !chart.valuesInPoundsFlag;
      }
}

 yAxis: {
        labels: {
          formatter: () => {
            const chart = this.chartRef as any; 
            
            if(chart && chart.valuesInPoundsFlag)
              return +chart.value  + "£";
            else 
            return +this.value + "$";
          } 
        }
      },
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Change menuItemDefinitions text on click event

Hi mk.developer,

Your code is mostly correct. You just need to pass an argument for formatter callback.
Demo: https://stackblitz.com/edit/highcharts- ... ine-tgn81u
API reference: https://api.highcharts.com/class-refere ... ckFunction

Regards!
Mateusz Bernacik
Highcharts Developer
mk.developer
Posts: 83
Joined: Wed Mar 17, 2021 6:07 pm

Re: Change menuItemDefinitions text on click event

Thanks @mateusz.b, very useful code.
mk.developer
Posts: 83
Joined: Wed Mar 17, 2021 6:07 pm

Re: Change menuItemDefinitions text on click event

I am trying similar code for tooltip but getting the following error:
Type '(arg: any) => string' is not assignable to type 'FormatterCallbackFunction<Point>'.
Code:

Code: Select all

tooltip: {
 pointFormatter: : (arg) => {
            const chart = this.chartRef as any; 
            
            if(chart && chart.valuesInPoundsFlag)
              return +arg.value  + "£";
            else 
            return +arg.value + "$";
     }
},
It looks like I need to return FormatterCallbackFunction but not sure how.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Change menuItemDefinitions text on click event

mk.developer,

Please try to reproduce that issue in the demo that I shared.

Regards!
Mateusz Bernacik
Highcharts Developer
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Change menuItemDefinitions text on click event

Here is a demo: https://stackblitz.com/edit/highcharts- ... ine-ilet5n

pointFormatter doesn't take any arguments. To get its default context you need to use regular function instead of arrow.

Regards!
Mateusz Bernacik
Highcharts Developer
mk.developer
Posts: 83
Joined: Wed Mar 17, 2021 6:07 pm

Re: Change menuItemDefinitions text on click event

Thanks for your quick reply. How can I call an existing angular method from pointFormatter function? Arrow function allows me to call an angular method so I changed it to arrow function.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Change menuItemDefinitions text on click event

Hi mk.developer,

I can see three options in this case:
- try to call your custom function in point.events.mouseOver:
https://stackblitz.com/edit/highcharts- ... ine-ijrs5z

- use Component.prototype to call a function:
https://stackblitz.com/edit/highcharts- ... ine-pxzeq6

- use tooltip.formatter instead of pointFormatter, you can get exactly the same results:
https://stackblitz.com/edit/highcharts- ... ine-mgryp3

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer
mk.developer
Posts: 83
Joined: Wed Mar 17, 2021 6:07 pm

Re: Change menuItemDefinitions text on click event

Thank you, you can close this thread.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Change menuItemDefinitions text on click event

You're welcome! Thread remains open in case anybody would like to ask / add something. And of course, in case of any futher questions feel free to contact us again :D
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”