CODEWITHSUNDEEP
reactjstypescripthighcharts
Peterhack
Peterhack

Reputation: 1061

How to load highcharts annotations module in react typescript?

I am trying to reproduce this highcharts using annotations in react with typescript. As you can see in a live demo the annotations are not being displayed, and I assume it is due to some loading issues.

import * as React from "react";
import * as Highcharts from "highcharts";
import * as Annotations from "highcharts/modules/annotations";

Upvotes: 2

Views: 2078

Answers (2)

Harut Margaryan
Harut Margaryan

Reputation: 96

here is the official link on how to use highchart modules

In this code example shown how to import highchart components

import Highcharts from 'highcharts'
import AnnotationsFactory from "highcharts/modules/annotations";
import HighchartsReact from 'highcharts-react-official'

// init the module
AnnotationsFactory(Highcharts);

After import you should use HighchartsReact component and add your annotation config there.

In this way it is possible to use any module for it.

Upvotes: 4

Matt McCutchen
Matt McCutchen

Reputation: 30909

It looks like DefinitelyTyped doesn't know about the highcharts/modules/annotations module. So first, create a separate file declarations.d.ts with:

declare module "highcharts/modules/annotations";

In demo.tsx:

import * as Highcharts from "highcharts";
import AnnotationsFactory = require("highcharts/modules/annotations");
AnnotationsFactory(Highcharts);

And add as any after the big configuration object being passed to Highcharts.chart so that TypeScript doesn't complain about the annotations property. (What you're doing seems to be valid at runtime but not recognized by the out-of-date typings.)

Finally, in tsconfig.json, change the module option from esnext to commonjs to be able to use the import assignment.

Final CodeSandbox.

Locally, I ran into some dependency issues and had to disable the tslint quotemark rule because it was blocking the build, but I ultimately got the annotations to work. Let me know if you need help with that part.

Upvotes: 3

Related Questions