Frederick
Posts: 2
Joined: Wed Sep 07, 2022 6:48 pm

Map lines not visible on mapChart load with React

Using Highcharts 9.3.2 and Highcharts-react-official 3.1.0
I can load the US map and data fine in JSFiddle, but with the React app the data points are visible but US map almost invisible and no state lines are present as they are in my JSFiddle.

Not sure how to troubleshoot?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Map lines not visible on mapChart load with React

Hi Frederick!
Thanks for contacting us with your question!

This is a known bug in Highcharts maps. You can find a related GitHub ticket here: https://github.com/highcharts/highcharts/issues/17086 To show maplines on the chart, just use TopoJSON map, instead of GeoJSON map. In your case, it leads to the next issue: in Highcharts ~9 TopoJSON maps have some bugs, so you will need to upgrade Highcharts in your project to release ~10, the best way - upgrade to the latest release, which is Highcharts v.10.2.1 (https://www.highcharts.com/blog/changel ... ts-v10.2.1).

In the demo below, you can see an example of a US map with mapline and mappoint.

Demo: https://codesandbox.io/s/highcharts-rea ... ked-ec0omq

Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Maps”