Highcharts US Bubble Map: Tooltip Issue When Hovering Over Bubbles

Question

I'm using Highcharts in a React application to create a US Bubble Map. The version details for the relevant libraries are as follows:

"@highcharts/map-collection": "^2.1.0" "highcharts": "^11.1.0" "highcharts-react-official": "^3.2.0" "proj4": "^2.9.0"

The problem I'm encountering is that when I hover over a bubble on the map, the tooltip is displaying information for a different bubble. However, the click event on the bubble correctly logs the name of the region.

Here's the link to my component: BubbleChart.js on StackBlitz

Relevant Code:

import React, { useEffect, useState } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import hcMap from 'highcharts/modules/map';
import proj4 from 'proj4';
import mapDataUSA from '@highcharts/map-collection/countries/us/us-all.geo.json';
hcMap(Highcharts);

if (typeof window !== 'undefined') {
  window.proj4 = window.proj4 || proj4;
}

function BubbleChart(props) {
  const chartOptions = {
    chart: {
      backgroundColor: 'transparent',
      type: 'map',
      map: 'countries/us/us-all',
    },
    title: {
      text: null,
    },
    credits: {
      enabled: false,
    },
    mapNavigation: {
      enabled: false,
      enableButtons: false,
    },
    navigation: {
      buttonOptions: {
        enabled: false,
      },
    },
    credits: {
      enabled: false,
    },
    tooltip: {
      //   headerFormat: "",
      //   pointFormat: "lat: {point.lat}, lon: {point.lon}",
      formatter: function () {
        return (
          '<b>' +
          this.point.options.keyword +
          '</b><br/>' +
          this.point.options.z
        );
      },
    },
    legend: {
      enabled: false,
    },
    series: [
      {
        // Use the gb-all map with no data as a basemap
        name: 'US Map',
        mapData: mapDataUSA,
        borderColor: '#FFFFFF',
        nullColor: '#E4E7EC',
        showInLegend: false,
      },
      {
        // Specify points using lat/lon
        type: 'mapbubble',
        name: 'Locations',
        color: '#2E90FA',
        data: [
          // { z: 10, keyword: "Massachusetts", lat: 42.40, lon: -71.38},
          // { z: 20, keyword: "Washington", lat: 47.48, lon: -120.36},
          // { z: 30, keyword: "California", lat: 36.74, lon: -119.59},
          // { z: 40, keyword: "Oregon", lat: 43.83, lon: -120.38},
          { z: 79, keyword: 'North East', lat: 43.29, lon: -74.21 },
          { z: 49, keyword: 'South East', lat: 63.96, lon: -143.62 },
          { z: 26, keyword: 'Mid West', lat: 37.93, lon: -90.17 },
          { z: 21, keyword: 'South West', lat: 32.31, lon: -110.92 },
          { z: 15, keyword: 'West Coast', lat: 47.75, lon: -121.09 },
          { z: 19, keyword: 'Unassiged', lat: null, lon: null },
        ],
        cursor: 'pointer',
        point: {
          events: {
            click: function () {
              console.log(this.keyword);
            },
          },
        },
      },
    ],
  };

  return (
    <HighchartsReact
      containerProps={{ style: { height: 'auto', width: '100%' } }}
      highcharts={Highcharts}
      constructorType={'mapChart'}
      options={chartOptions}
    />
  );
}

export default BubbleChart;

Additional Details:

The tooltip displays information for the wrong bubble when hovering. The click event on the bubble correctly logs the name of the region. I'm using the latest versions of Highcharts and related libraries. I appreciate any insights or suggestions on resolving this tooltip issue. Thank you!

enter image description here

I'm currently working on visualizing data using the Highcharts library in a React application. I've implemented a Bubble Map to display geographic data. The version details for the relevant libraries are as follows:

"@highcharts/map-collection": "^2.1.0" "highcharts": "^11.1.0" "highcharts-react-official": "^3.2.0" "proj4": "^2.9.0"

While implementing this, I encountered an issue with the tooltips on the bubbles. When I hover over a bubble on the map, the tooltip is displaying information for a different bubble. However, the click event on the bubble correctly logs the name of the region.

Specific Questions:

Is there a known issue with tooltip rendering in the current version of Highcharts? Are there any specific configurations or adjustments that need to be made for tooltips in a Bubble Map scenario? I'm seeking insights or suggestions on how to resolve this tooltip issue and ensure that it displays information accurately when hovering over the bubbles.

Thank you for any assistance or guidance provided!

Answer 1

There is an issue with their latest version i have reported this bug in their github repository.

here is the link for the github issue in highcharts :- https://github.com/highcharts/highcharts/issues/20243

so for that i have used the highcharts version 10.3.3 in my react web application. It is working fine for me.

Answer 2

I encountered a similar problem and conducted some research, which revealed that the issue is associated with the v11.2.0 release.

In your situation, it seems you are using the caret (^) symbol to install the Highcharts version, which results in the installation of the latest available version, namely 11.2.0. To specifically install version 11.1.0, you should remove the caret (^) symbol from the Highcharts dependency version specification.

Answer 3

there is an upgrade available now. Version 11.3 has a fix for this issue.