Highcharts marker size change on/after hover

Question

There is another problem with highcharts marker size. There are 3 properties, size depends on: radius, height, width. The default values of radius is 4. I`m setting height and width of marker, which depends on some data, for example:

 marker: {
     height: 50,
     width: 70,
     symbol: 'circle'
 }

The the graph is rendering. Here is, how it looks:

But after, or on hover action size changes. It returns to the default value of RADIUS, and ignoring my values of height and width:

Any ideas, how to fix it?

have you tried setting the hover state manually to the same values? Not sure if this is correct, but you could try to set plotOptions.series.states.hover.marker.width/height as well. — jumps4fun
I would take a look at the point mouseOver and point mouseOut events. Reference: api.highcharts.com/… | api.highcharts.com/… — jlbriggs
I think this is a bug that width and height changes anything. According to the API - width/height should be available for image markers only. — Paweł Fus

Paweł Fus Paweł Fus · Accepted Answer · 2016-03-24T10:44:19

You can make this work, by wrapping setState method in Highcharts (or using mouseOver event). Here is simple example:

(function (H) {
  H.wrap(H.Point.prototype, 'setState', function (p) {
    p.apply(this, [].slice.call(arguments, 1));

    if (this.marker && this.graphic) {
      this.graphic.attr({
        width: this.marker.width,
        height: this.marker.height
      });
    }
  });
})(Highcharts);

And live demo: http://jsfiddle.net/o5nkeup7/1/

I suggest to disable halo - halo path is always circle, and won't work in your case.

Highcharts marker size change on/after hover

1 Answers