React bubble map with HighchartsMore, Error: Highcharts error #17: www.highcharts.com/errors/17

[JoaoAlrc]

Hi! I'm a young dev and i have a trouble trying to make a bubble map, someone could help me? And, I wanna make a brazil map chart, how can I set this? i'm getting the Error: Highcharts error #17: www.highcharts.com/errors/17

see my code:

import React, { Component } from 'react';
import ReactHighcharts from 'react-highcharts';
import HighchartsMore from 'highcharts/highcharts-more';

HighchartsMore(ReactHighcharts.Highcharts);

export default class MapChart extends Component {
  // mapData = Highcharts.maps['countries/br/br-all']
  config = () => {
    return {
      chart: {
        borderWidth: 1,
        map: 'custom/world'
      },

      title: {
        text: 'World population 2013 by country'
      },

      subtitle: {
        text: 'Demo of Highcharts map with bubbles'
      },

      legend: {
        enabled: false
      },

      mapNavigation: {
        enabled: true,
        buttonOptions: {
          verticalAlign: 'bottom'
        }
      },

      series: [{
        name: 'Countries',
        color: '#E0E0E0',
        enableMouseTracking: false
      }, {
        type: 'mapbubble',
        name: 'Population 2016',
        joinBy: ['iso-a3', 'code3'],
        data: [],
        minSize: 4,
        maxSize: '12%',
        tooltip: {
          pointFormat: '{point.properties.hc-a2}: {point.z} thousands'
        }
      }]
    }
  }

  render() {
    return (
      <div>
        <ReactHighcharts config={this.config()} ref="chart" ></ReactHighcharts>
      </div>
    );
  }
}

"highcharts": "7.0.0" "react-highcharts": "^16.0.2"

Originally posted by @JoaoAlrc in https://github.com/highcharts/highcharts-react/issues/43#issuecomment-509252109

[ppotaczek]

Hi @JoaoAlrc,

It looks like you're using an unofficial React wrapper. This repository is related with highcharts-react-official package. Below you can find a simple example of using our wrapper with bubble series type:

import Highcharts from "highcharts/highstock";
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsReact from "highcharts-react-official";

HighchartsMore(Highcharts);

const options = {
  series: [{
    type: 'bubble',
    data: [[1,2], [2,2]]
  }]
}

class App extends React.Component {
  render() {
    return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          options={options}
        />
      </div>
    );
  }
}

Live demo: https://codesandbox.io/s/highcharts-react-demo-x2k0r

Best regards!

[JoaoAlrc]

Hi @ppotaczek ! Thank for your help! But, with your code, I can run the project perfectly, but, when i put my options bubble map (i get this on official website), i have the same error, u know what i'm doing wrong? and, sorry bout my english hahaha

import React, { Component } from 'react';
import Highcharts from "highcharts/highstock";
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsReact from "highcharts-react-official";

HighchartsMore(Highcharts);

const options = {
  chart: {
      borderWidth: 1,
      map: 'custom/world'
  },

  title: {
      text: 'World population 2013 by country'
  },

  subtitle: {
      text: 'Demo of Highcharts map with bubbles'
  },

  legend: {
      enabled: false
  },

  mapNavigation: {
      enabled: true,
      buttonOptions: {
          verticalAlign: 'bottom'
      }
  },

  series: [{
      name: 'Countries',
      color: '#E0E0E0',
      enableMouseTracking: false
  }, {
      type: 'mapbubble',
      name: 'Population 2016',
      joinBy: ['iso-a3', 'code3'],
      data: [],
      minSize: 4,
      maxSize: '12%',
      tooltip: {
          pointFormat: '{point.properties.hc-a2}: {point.z} thousands'
      }
  }]
}

export default class MapChart extends Component {
  render() {
    return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          options={options}
        />
      </div>
    );
  }
}

[ppotaczek]

Hi @JoaoAlrc,

You need to:

• add @highcharts/map-collection npm package
• import the map from map collection
• import and initialize map module
• use "mapChart" constructorType
• import or get data

Example:

import Highcharts from "highcharts";
import HighchartsMap from "highcharts/modules/map";
import HighchartsReact from "highcharts-react-official";

import map from "@highcharts/map-collection/custom/world.geo.json";
import mapData from "./mapData";

HighchartsMap(Highcharts);

const options = {
  chart: {
    ...,
    map: map
  },
  ...,
  series: [...,
    {
      ...,
      data: mapData
    }
  ]
};

class App extends React.Component {
  render() {
    return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          options={options}
          constructorType={"mapChart"}
        />
      </div>
    );
  }
}

Live demo: https://codesandbox.io/s/highcharts-react-demo-r4yll

Best regards!

[gloonch]

Hi @ppotaczek, I applied the solutions you wrote in this issue, none of them are working for me

The difference here is I'm trying to have an arc-diagram chart with the same errors, I've read all the documents still can't use it

Here's my component code: Thank you for your help

import React, {useEffect, useRef} from "react";
import Highcharts from 'highcharts/modules/arc-diagram';
import HighchartsArcdiagram from 'highcharts/modules/arc-diagram';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsReact from 'highcharts-react-official';

export default () => {

    // HighchartsArcdiagram(Highcharts);
    // HighchartsMore(Highcharts);

    const options = {
        title: {
            text: 'Highcharts Arc Diagram'
        },
        series: [{
            linkWeight: 1,
            keys: ['from', 'to', 'weight'],
            type: 'arcdiagram',
            centeredLinks: true,
            data: [
                ['Hamburg', 'Stuttgart', 1],
                ['Hamburg', 'Frankfurt', 1],
                ['Hamburg', 'München', 1],
                ['Hannover', 'Wien', 1],
                ['Hannover', 'München', 1],
                ['Berlin', 'Wien', 1],
                ['Berlin', 'München', 1],
                ['Berlin', 'Stuttgart', 1],
                ['Berlin', 'Frankfurt', 1],
                ['Berlin', 'Köln', 1],
                ['Berlin', 'Düsseldorf', 1],
                ['München', 'Düsseldorf', 1],
                ['München', 'Wien', 1],
                ['München', 'Frankfurt', 1],
                ['München', 'Köln', 1],
                ['München', 'Amsterdam', 1],
                ['Stuttgart', 'Wien', 1],
                ['Frankfurt', 'Wien', 1],
                ['Frankfurt', 'Amsterdam', 1],
                ['Frankfurt', 'Paris', 1],
                ['Frankfurt', 'Budapest', 1],
                ['Düsseldorf', 'Wien', 1],
                ['Düsseldorf', 'Hamburg', 1],
                ['Amsterdam', 'Paris', 1],
                ['Paris', 'Brest', 1],
                ['Paris', 'Nantes', 1],
                ['Paris', 'Bayonne', 1],
                ['Paris', 'Bordeaux', 1],
                ['Paris', 'Toulouse', 1],
                ['Paris', 'Montpellier', 1],
                ['Paris', 'Marseille', 1],
                ['Paris', 'Nice', 1],
                ['Paris', 'Milano', 1],
                ['Nantes', 'Nice', 1],
                ['Bordeaux', 'Lyon', 1],
                ['Nantes', 'Lyon', 1],
                ['Milano', 'München', 1],
                ['Milano', 'Roma', 1],
                ['Milano', 'Bari', 1],
                ['Milano', 'Napoli', 1],
                ['Milano', 'Brindisi', 1],
                ['Milano', 'Lamezia Terme', 1],
                ['Torino', 'Roma', 1],
                ['Venezia', 'Napoli', 1],
                ['Roma', 'Bari', 1],
                ['Roma', 'Catania', 1],
                ['Roma', 'Brindisi', 1],
                ['Catania', 'Milano', 1]
            ]
        }]
    };

    return (
        <div>
            <HighchartsReact
                highcharts={Highcharts}
                options={options}
                // constructorType={"arcdiagram"} // The "constructorType" property is incorrect or some required module is not imported.
            ></HighchartsReact>
        </div>
    )
}

[ppotaczek]

Hi @gloonch,

You need to add sankey and arc-diagram modules:

import Highcharts from "highcharts";
import sankey from "highcharts/modules/sankey";
import arcDiagram from "highcharts/modules/arc-diagram";

sankey(Highcharts);
arcDiagram(Highcharts);

Live demo: https://codesandbox.io/s/highcharts-react-demo-pvcxss?file=/demo.jsx API Reference: https://api.highcharts.com/highcharts/series.arcdiagram

Best regards!