CODEWITHSUNDEEP
highcharts
wergeld
wergeld

Reputation: 14442

States Not Working on Highmaps mappoint click

I am trying to change the color and borderColor of a lat/long point on a Highmap when a user clicks it. Currently when a user clicks that point it turns grey with a thick black border and a "glow" effect around it. I would like it to turn a color of my choosing. I have set the options as follows:

  plotOptions: {
    series: {
      tooltip: {
        headerFormat: '',
        pointFormat: '{point.name}'
      },
      states: {
        select: {
          color: '#EFFFEF',
          borderColor: 'red'
        },
        hover: {
          color: '#a4edba'
        }
      }
    }
  }

This does not appear to be working. If I put the same states code under plotOptions.mappoint there is, again, no change.

I have repurposed the Highmaps demo with this set up. On that demo if you click on the Basin shape it turns that light green. However, when you click on "Tournai" or "Brussels" or any other point on the map it does not use the states option I have set.

Upvotes: 0

Views: 197

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

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

  plotOptions: {
    series: {
      marker: {
        fillColor: '#FFFFFF',
        lineWidth: 2,
        lineColor: Highcharts.getOptions().colors[1],
        states: {
            select: {
                fillColor: 'red',
                radius: 12,
            }
        }
      }
    }
  },

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

Upvotes: 1

Related Questions