'HighCharts Custom maps not working on react

I am building a web app on React Js and trying too build a custom map of floors of building. I followed the article on https://www.highcharts.com/docs/maps/create-custom-maps and created an application using HTML CSS and JavaScript,https://jsfiddle.net/hop9cqxj/92/ however I want it inside of ReactJS. Whenever I paste the map options into the React JS variable. I get the error below:

Error Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=map

The demo work's link is here: https://codesandbox.io/s/inspiring-sunset-o3pf92

  • missingModuleFor: map
highcharts


Solution 1:[1]

You need to use Highmaps source code and mapChart chart constructor type.

import Highcharts from "highcharts/highmaps";
import HighchartsReact from "highcharts-react-official";
import React from "react";

const option2 = {...};

export default function DeltaSecond() {
  return (
    <>
      <HighchartsReact
        highcharts={Highcharts}
        options={option2}
        constructorType="mapChart"
      ></HighchartsReact>
    </>
  );
}

Also, I have noticed that Highcharts doesn't work in StrictMode from the newest React, so you can report a potential bug on highcharts-react github: https://github.com/highcharts/highcharts-react

Live demo: https://codesandbox.io/s/nifty-satoshi-xxt-xxtkp9?file=/src/components/buildings/Delta/delta2nd.js

Docs: https://www.npmjs.com/package/highcharts-react-official#options-details

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ppotaczek

Related Questions