Highcharts React with Typescript Event Typing

Question

Highcharts Event with TypeScript

I am using custom events in my Highcharts together with the React wrapper. As an example it toggles the legend when opening and closing the full screen.

const options: Highcharts.Options = {
  chart: {
    events: {
      fullscreenOpen: function (this: any) {
        this.update({
          legend: {
            enabled: true,
          },
        });
      },
      fullscreenClose: function (this: any) {
        this.update({
          legend: {
            enabled: false,
          },
        });
      },
    },
  },
};

Correct typing?

How can I type the event correctly and can get rid of the this: any?

Code & Demo

Stackblitz Code

Stackblitz Demo

I would suggest you look at the documentation of Highcharts. api.highcharts.com/class-reference/… — Schuere
– Schuere, Commented Oct 12, 2022 at 8:41

ppotaczek · Accepted Answer · 2022-10-12 09:13:19Z

1

You can check types in Highcharts API. In your case it will be:

  chart: {
    events: {
      fullscreenOpen: function (this: Highcharts.Chart) {
        this.update({
          legend: {
            enabled: true
          }
        });
      },
      fullscreenClose: function (this: Highcharts.Chart) {
        this.update({
          legend: {
            enabled: false
          }
        });
      },
    },
  }

Live demo: https://stackblitz.com/edit/react-starter-typescript-nv7acw?file=App.tsx

API Reference:

https://api.highcharts.com/highcharts/chart.events.fullscreenOpen

https://api.highcharts.com/class-reference/Highcharts#.FullScreenfullscreenOpenCallbackFunction

answered Oct 12, 2022 at 9:13

ppotaczek

39.3k2 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Highcharts React with Typescript Event Typing

Highcharts Event with TypeScript

Correct typing?

Code & Demo

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Highcharts Event with TypeScript

Correct typing?

Code & Demo

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related