Map Bubble Chart when we hover on bubble i dont want to change the color of the chart

[yatesh]

I am using map bubble chart of highcharts and use the library wrapper on highcharts highcharts-react-official, here are the code i am using for react
can you please suggest what i can do in that so that it will not change color on hover of bubble.

Code: Select all

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;
}

let mapOptions = {
    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,
            states: {
                hover: {
                    color: null,
                    borderColor: null,
                },
            },
        },
        {
            // Specify points using lat/lon
            type: "mapbubble",
            name: "Locations",
            states: {
                hover: {
                    color: null,
                    borderColor: null,
                },
            },
            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);
                    }
                }
            },
        }
    ]
};

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


export default USAMapBubbleChart

Here is the code sandbox link :- https://codesandbox.io/s/wonderful-broo ... src/App.js

[dawid.d]

Hello,

Welcome to our forum and thanks for contacting us with your question!

If I understand correctly that you want to disable map fading when hovering the bubble, you can set `series.states.inactive.enabled` to `false`. See the demo below.

API: https://api.highcharts.com/highmaps/ser ... ve.enabled
Demo: https://codesandbox.io/s/quizzical-fros ... leChart.js

Let me know if that is what you were looking for
Best regards!