1

I am new to highcharts. I have looked into the marker-clusters implementation using vanilla javascript as shown in examples here.

The vanilla javascript implementation works as expected but porting the solution in react is not working.

I understand that additional functionality in highcharts needs to be imported from specific modules but I cannot find the relevant module marker-clusters inside my node_modules folder.

I have a demo codesandbox replicating the issue here

Basically, the demos in highcharts sample use

<script src="https://code.highcharts.com/modules/marker-clusters.js"></script>

for the clustering behaviour but I am not able to do the same in react. Any help is much appreciated. Thank You.

subash
  • 172
  • 1
  • 2
  • 9

1 Answers1

4

The marker clusters feature is avalivable in Highcharts since v8.0.0. You are using version 7.2.1.

You need to upgrade your Highcharts, import and initialize marker-clusters module:

import markerClusters from "highcharts/modules/marker-clusters";
markerClusters(Highcharts);

Live demo: https://codesandbox.io/s/winter-bash-y44sh?file=/src/HighMapsWrapper.js

Docs: https://www.highcharts.com/docs/advanced-chart-features/marker-clusters

Changelog: https://www.highcharts.com/blog/changelog/#highcharts-v8.0.0

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • Thanks. I did notice that and updated my local implementation. But I was unaware of the initialization part especially in react. This helped a lot. – subash Jun 10 '20 at 10:46