It is currently Tue Apr 24, 2018 8:26 am Advanced search

Maps drill down issue with react + redux

Technical support, bug reports and more.

Maps drill down issue with react + redux

Postby ghanshyamdrathod » Fri Apr 13, 2018 9:34 am


I am using Highcharts with react to draw world map & maps drill down. Here is my requirement to load charts data.

On chart load I am firing API request to load all counties data that will embed with GeoJson to show values to each county.

On click of any country I have to fire new API request to fetch all region data associated with this county, i am using props to fire redux action and to get the results via props. but I am getting this issue after clicking on any country 'VM9440:11 Uncaught TypeError: Cannot read property 'xAxis' of null', & getting 'this' chart object as empty.

Here is my code that I am using to draw highchart & to do drill-down.

export function renderMaps(chart, series, props) {
let mapsData = Highcharts.geojson(worldMapData);

//Maps drill-down country-> data mapping
const geoJsonDataMapping = {
ar: ar,
au: au,
br: br,
ca: ca,
cn: cn,
de: de,
fr: fr,
"in": india,
jp: jp,
nl: nl,
us: us
}; + drillDownCountries);

const samplePayload= {
"filter": {
mapsData, (item) => {
if (!_.isUndefined({
const getDetails = _.find(series, {label:});

item.drilldown =;
item.value = _.isUndefined(getDetails) ? 0 : getDetails.value;
item.payload = samplePayload;

return _.merge(
chart : {
height: 635,
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
const chartObject = this,
mapKey = _.lowerCase(e.point.drilldown);

//don't do map drill down for this countries
if (!_.includes(drillDownCountries, mapKey)) {

//Do drill down for selected country only
if (_.includes(drillDownCountries, mapKey)) {
//Make call to "listen_activity_by_state" metric
props.fetchRegionData(e.point.payLoad, props.chart.get("id"));

mapsData = Highcharts.geojson(geoJsonDataMapping[mapKey]);
// FOR NOW: Set a non-random bogus value, (item, i) => item.value = i);

// Hide loading and add series
chartObject.addSeriesAsDrilldown(e.point, {
data: mapsData,
dataLabels: {
enabled: false,
format: '{}'
drillup: function () {
this.setTitle(null, { text: '' });
series: [{
data: mapsData,
name: "Mentions",
dataLabels: {
enabled: true,
format: '{}'
}, {
type: 'mapline',
color: 'silver',
enableMouseTracking: false,
animation: {
duration: 500
colorAxis: {
min: 0


The other question is from props how can I pass values to the highcharts function?
Posts: 1
Joined: Fri Apr 13, 2018 9:12 am

Re: Maps drill down issue with react + redux

Postby daniel_s » Fri Apr 13, 2018 10:45 am

hi ghanshyamdrathod,

Could you reproduce your project with example data in Stackblitz platform or similar? It's hard to deduce what is going wrong, but I suspect that you're trying to refer to chart, which is actually undefined, that's why I'm asking for the minimal live working example.

Best regards!
Daniel Studencki,
Highcharts Developer
Posts: 523
Joined: Fri Sep 01, 2017 1:01 pm

Return to Highmaps Usage

Who is online

Users browsing this forum: No registered users and 0 guests