Examples of using high maps with react

[Sivapriya]

Hello,

I'm trying to use highcharts with react and not able to make it work. Here is my react ccomponent. Please note I installed highcharts using npm - 'npm install highcharts --save'

import React, { Component } from 'react'
import { findDOMNode } from 'react-dom';
import Highcharts from 'highcharts';
import HighMaps from 'highcharts/highmaps'
import drilldown from 'highcharts/modules/drilldown';

class CustomHighMap extends Component{


componentDidMount() {
// load modules
drilldown(Highcharts);

const options = {
title: {
text: 'Fruit Consumption'
},
plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66'
}
}
}
},
colorAxis: {
min: 0,
minColor: '#E6E7E8',
maxColor: '#005645'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},

subtitle: {
text: 'USA',
floating: true,
align: 'right',
y: 50,
style: {
fontSize: '16px'
}
},
series: [{
data: Highcharts.geojson(Highcharts.maps['https://code.highcharts.com/mapdata/cou ... /us-all.js']),
name: 'USA',
dataLabels: {
enabled: true,
format: '{point.properties.postal-code}'
}
}]
};

this.chart = new Highcharts['Map'](
findDOMNode(this),
options
);
}

componentWillUnmount () {
this.chart.destroy();
}

render() {
return (
<div className="in-highchart"></div>
)
}
}

export default CustomHighMap;

I get this error - 'Cannot read property 'https://code.highcharts.com/mapdata/cou ... /us-all.js' of undefined'. ANy help on pointing to any working example or figure out whats going on. I'm trying to implement a drilldown map with react

[challengereality]

Did you import the map anywhere? I believe it either needs to be included in your script src on the html file or as a hardcoded file locally.

http://jsfiddle.net/gh/get/library/pure ... -counties/

that demo shows it imported in the html. I stored mine locally.

Also, where are you having the map render in the html? Its not shown in your code. Generally you would include a reference at the bottom to the html you want to return.


render(){
return {
<div>
<Highchart options=options />
</div>
}}

[Sivapriya]

I'm referencing the map directly from this url

data: Highcharts.geojson(Highcharts.maps['https://code.highcharts.com/mapdata/cou ... /us-all.js']),

And on component mount , the chart is instantiated.So it should be rendered with the given options

this.chart = new Highcharts['Map'](
findDOMNode(this),
options

[challengereality]

Do you have your code on a repo or jsfiddle?

[daniel_s]

hi Sivapriya,

Please visit your previous post that you posted on this forum, because I explained there how to properly use map collections with React framework, and made live example in Sandbox platform. Here is the link to topic: viewtopic.php?f=14&t=39804

Best regards!