reactjstypescripthighchartsreact-highcharts

How to use Highcharts Flowmap in React project with typescript

I want to get a similar chart in react project using typescript - https://www.highcharts.com/demo/maps/flowmap

The flowmap module is present in highcharts as a .js file, not a .ts file.

As a result, an attempt to connect the module

import HighchartsMap from 'highcharts/highmaps';
import HighchartsReact from 'highcharts-react-official';
import HighchartsFlowmap from 'highcharts/modules/flowmap'

HighchartsFlowmap(HighchartsMap);

return <HighchartsReact highcharts={HighchartsMap} options={options} constructorType='mapChart' />;

results in an error:

TS7016: Could not find a declaration file for module 'highcharts/modules/flowmap'. '.../node_modules/highcharts/modules/flowmap.js' implicitly has an 'any' type.
  If the 'highcharts' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module 'highcharts/modules/flowmap';`

Please tell me how to solve this problem

Solution

  • The flowmap series is available from the Highcharts 11v. Make sure you use the proper version.

    Alternative way of loading module:

    require('highcharts/modules/flowmap')(Highcharts)

    Demo: https://stackblitz.com/edit/react-ts-c8vikm?file=package.json,index.tsx,index.html