CODEWITHSUNDEEP
javascripthighcharts
Richard
Richard

Reputation: 65520

Highcharts: set 'select' state on a point and maintain it after mouseover?

I'm using Highcharts and trying to set the select state on a point and maintain the state.

I can set the state just fine, like this:

var chart = new Highcharts.Chart(options);
chart.get('b').setState('select');

But the state gets unset when the user mouses over and then out of the point.

Here is a JSFiddle example - try mousing over the red point and observe that it loses its select state: http://jsfiddle.net/o72xgtfm/1/

Shouldn't the state be maintained even after mouseover, given that it's a select state, not hover?

All I want is to set the point as red, and keep it red. Could I perhaps set a custom state that wouldn't be affected by mouseover?

Upvotes: 4

Views: 2476

Answers (2)

Richard
Richard

Reputation: 65520

I managed to fix this eventually by using:

point.select(true, true);

rather than

point.setState('select');

The latter is undocumented, whereas the first seems to be the official way to do things.

Reference: https://api.highcharts.com/class-reference/Highcharts.Point#select

Upvotes: 4

smnbbrv
smnbbrv

Reputation: 24541

Seems like the state is simply changed to hover and as long as you don't set it up back, it is not returned. Everything as it should be.

What you can do is tracking mouseout event on that point and assign the state again. But it will be blinking from red to grey to red.

What I propose is avoid using states for this purpose. I do not know your business case but if it is only about the point color, you can explicitly add it to the point without states at all:

    data: [
        {'id': 'a', 'x': 185.4, 'y': 66.8}, 
        {'id': 'b', 'x': 177.8, 'y': 75.5, color: "red" }, 
        {'id': 'c', 'x': 180.3, 'y': 93.2}
    ]

Fiddle

Upvotes: 0

Related Questions