Highcharts error number 17 when plotting map

Question

I am new in using Highcharts to create a map. In this case I have data which has *village name, latitude, longitude, crop yield difference and predicted practice. my intention is when a user select village name on selectbox,a marker should appear on the map using longitude and latitude data to show the location of the village, at that point also show predicted practice.

I have written my code but I get this error every time I select village name from the select box

2react-dom.development.js:22839 Uncaught Error: Highcharts error #17: www.highcharts.com/errors/17
    at c.Chart.e (highcharts.src.js:462:1)
    at c.fireEvent (highcharts.src.js:2407:1)
    at c.error (highcharts.src.js:470:1)
    at c.Chart.initSeries (highcharts.src.js:23590:1)
    at highcharts.src.js:25127:1
    at Array.forEach (<anonymous>)
    at c.Chart.firstRender (highcharts.src.js:25124:1)
    at c.Chart.<anonymous> (highcharts.src.js:23572:1)
    at c.fireEvent (highcharts.src.js:2407:1)
    at c.Chart.init (highcharts.src.js:23446:1)
2react-dom.development.js:18687 The above error occurred in the <ForwardRef> component:

    at http://localhost:3000/static/js/bundle.js:6112:33
    at MapChart (http://localhost:3000/static/js/bundle.js:132:5)
    at div
    at div
    at VillagePredictions (http://localhost:3000/static/js/bundle.js:166:96)
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:12056 Uncaught Error: Highcharts error #17: www.highcharts.com/errors/17
    at c.Chart.e (highcharts.src.js:462:1)
    at c.fireEvent (highcharts.src.js:2407:1)
    at c.error (highcharts.src.js:470:1)
    at c.Chart.initSeries (highcharts.src.js:23590:1)
    at highcharts.src.js:25127:1
    at Array.forEach (<anonymous>)
    at c.Chart.firstRender (highcharts.src.js:25124:1)
    at c.Chart.<anonymous> (highcharts.src.js:23572:1)
    at c.fireEvent (highcharts.src.js:2407:1)
    at c.Chart.init (highcharts.src.js:23446:1)

Being new to Highcharts I have searched for solutions but havent figure it out.

Here is the code that is supposed to work

import React, { useState, useEffect } from 'react';
import Select from 'react-select';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import axios from 'axios';


const MapChart = ({ lat, lon }) => {
  const options = {
    chart: {
      map: 'countries/tz/tz-all',
    },
    title: {
      text: 'Tanzania Map',
    },
    series: [
      {
        name: 'Villages',
        type: 'mapbubble',
        data: [
          {
            name: 'Selected Village',
            z: 1,
            lat: lat,
            lon: lon,
          },
        ],
        maxSize: '12%',
      },
    ],
  };

  return <HighchartsReact highcharts={Highcharts} options={options} />;
};

const VillagePredictions = () => {
  const [selectedVillage, setSelectedVillage] = useState(null);
  const [villages, setVillages] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    axios
      .get('village_pred/')
      .then(response => {
        setVillages(response.data.data);
        setLoading(false);
      })
      .catch(error => {
        console.log(error);
        setLoading(false);
      });
  }, []);

  const options = villages.map(village => ({
    value: village.name,
    label: village.name,
  }));

  const handleVillageChange = selectedOption => {
    setSelectedVillage(selectedOption);
  };

  const selectedVillageData =
    selectedVillage !== null
      ? villages.find(village => village.name === selectedVillage.value)
      : null;
console.log(selectedVillageData)

  return (
    <div>
      <h2>Village Predictions</h2>
      <div style={{ width: '200px', marginBottom: '20px' }}>
        <Select
          value={selectedVillage}
          onChange={handleVillageChange}
          options={options}
        />
      </div>
      {loading && <p>Loading...</p>}
      {!loading && selectedVillageData && (
        <div>
          <p>Selected Village: {selectedVillage.label}</p>
          <MapChart
            lat={selectedVillageData.latitude}
            lon={selectedVillageData.longitude}
          />
          <p>Crop Yield Difference: {selectedVillageData.crop_yield_difference}</p>
          <p>Predicted Farm Practice: {selectedVillageData.predicted_practice}</p>
        </div>
      )}
    </div>
  );
};

export default VillagePredictions;

Now when I print my data on the console, this is how data for a single village looks like

altitude : 1591.4000244140625
crop_yield_difference: 0.4101111111111102
latitude : -4.2583160400390625
longitude: 35.52566146850586
name: "Seloto"
predicted_practice: "fertilizer"

And finally my react version is "react": "^18.2.0", and highcharts is "highcharts": "^7.2.0",

Unfortunately I am unable to reproduce this to be used as an example but anyone who has experienced this to help will really save my day. Thank you

Answer 1

Highcharts error #17 results from the fact that you have used Highcharts which doesn't have mapbubble series type. You should use Highmaps and mapChart constructor type. For example:

import Highmaps from "highcharts/highmaps";
import HighchartsReact from "highcharts-react-official";

const MapChart = ({ lat, lon }) => {
  const options = useMemo(() => ({
    chart: {
      map: 'countries/tz/tz-all'
    },
    title: {
      text: 'Tanzania Map'
    },
    series: [
      {
        name: 'Villages',
        type: 'mapbubble',
        data: [
          {
            name: 'Selected Village',
            z: 1,
            lat: lat,
            lon: lon
          },
        ],
        maxSize: '12%'
      }
    ]
  }), [lat, lon]);

  return <HighchartsReact constructorType="mapChart" highcharts={Highmaps} options={options} />;
};

---

Live demo: https://codesandbox.io/s/highcharts-react-demo-4g96sc?file=/demo.jsx

Docs: https://www.highcharts.com/docs/maps/getting-started