CODEWITHSUNDEEP
reactjshighcharts
Seth McClaine
Seth McClaine

Reputation: 10040

highMaps map disappears when options are updated in react

I'm using npm `react-highcharts-official package.

I have the following component

<div>
{ R.isNil(this.state.hcOptions) ? (
    <p>Loading...</p>
) : (
    <HighchartsReact
        highcharts={ Highcharts }
        constructorType={ 'mapChart' }
        options={ this.state.hcOptions }
        ref={ this.state.chartRef }
    />
)}
<div>

When I initially set this.state.hcOptions the map will render fine.

enter image description here

If I replace hcOptions with new data, or even just set it to the same data again the map disappears but the bottom grid still displays.

enter image description here

What do I need to do to change out options data and have the new map render?

Code Sample: https://codesandbox.io/s/7oz0m56px

The button at the bottom Change Map Options toggles the options. Loading either option set initially will load the map. toggling between the two causes the map it's self not to render.

Upvotes: 0

Views: 291

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

That problem is a Highmaps regression bug, which fails since 7.1.0 and is reported here: https://github.com/highcharts/highcharts/issues/10617

Simplified example: https://jsfiddle.net/BlackLabel/tuokmpvy/

The workaround is to use an older Highmaps version: 

<script src="https://code.highcharts.com/maps/7.0.3/highmaps.js"></script>

Live demo: https://jsfiddle.net/BlackLabel/poz8c51L/

Upvotes: 1

Related Questions