Changing the color of points in Highcharts using series.states.select.color

Question

I have a map I created using the Highcharts map module. I am trying to make it so that when you select a point, it changes color and then returns to its original color when no longer selected. Despite following the API documentation (https://api.highcharts.com/highmaps/plotOptions.series.states.select.color) I can only get the point to change to the default select settings - grey fill with a black border.

This is the code for the chart:

(async () => {

    const topology = await fetch(
        'https://code.highcharts.com/mapdata/custom/europe.topo.json'
    ).then(response => response.json());

    Highcharts.mapChart('container', {
        chart: {
            map: topology,
            margin: 0,
            backgroundColor: '#fff'
        },

        title: {
            text: ''
        },
      
        tooltip: {
          headerFormat: '',
          pointFormat: '{point.name}',
          backgroundColor: '#333',
          borderColor: '#333',
          borderRadius: 0,
          shadow: false,
          shape: 'rect',
          padding: 8,
            style: {
              fontSize: '1em',
              fontWeight: 'normal',
              color: '#fff'
          },
        },
      
        legend: {
          enabled: false,
        },
      
        plotOptions: {
            mappoint: {
              allowPointSelect: true,
            states: {
              select: {
                color: 'red'
              }
            },
              dataLabels: {
                enabled: false
                  }
                }
            },
            mapView: {
              projection: {
                name: 'WebMercator'
                },
              zoom: 5.1,
              center: [4, 52]
            },
      
        series: [{
            name: 'Basemap',
            borderColor: '#d3d3d3',
            borderWidth: 1,
            nullColor: '#fff',
        }, {
            type: 'mappoint',
            marker: {
              symbol: 'circ',
              radius: 6,
            },
            name: 'P',
            cursor: 'pointer',
            data: [{
                name: 'P1',
                lat: 49.214439,
                lon: -2.131250,
            },{
                name: 'P2',
                lat: 51.4811,
                lon: -0.6248,
            },{
                name: 'P3',
                lat: 50.7932,
                lon: -1.8843,
            },{
                name: 'Winchcombe Place Care Home',
                lat: 51.4090,
                lon: -1.3215,
            },{
                name: 'P4',
                lat: 53.9320,
                lon: -1.0694,
            }],
        },{
            type: 'mappoint',
            marker: {
              symbol: 'circ',
              radius: 6,
            },
            name: 'S',
            cursor: 'pointer',
            data: [{
                name: 'S1',
                lat: 56.2639,
                lon: 9.5018,
            },{
                name: 'S2',
                lat: 51.2977,
                lon: -0.3079,
            },{
                name: 'S3',
                lat: 51.3725,
                lon: -0.4635,
            }],
        }]
    });

})();

I have tried changing the state in the individual series' sections and also using a point event instead, but no matter what happens, the point always changes to grey with a black border on the first click. I even asked the Highcharts GPT tool and the corrected code it gave me produced exactly the same results. What am I missing?

This is the codepen for the full chart:

Codepen

Answer 1

If you want to change the point status on click event, the state options should be set on plotOptons.series.marker.states, not plotOptions.series.states.

API references: https://api.highcharts.com/highmaps/series.mappoint.marker.states.select

Demo: https://jsfiddle.net/BlackLabel/jb3u74p1/

 plotOptions: {
  mappoint: {
    allowPointSelect: true,
    marker: {
      fillColor: '#FFFFFF',
      lineWidth: 2,
      lineColor: Highcharts.getOptions().colors[1],
      states: {
        select: {
          fillColor: 'red',
          radius: 12,
        }
      }
    },
    dataLabels: {
      enabled: false
    }
  }
}