Search code examples
angularjshighchartshighcharts-ngangular2-highcharts

Highcharts conditionally disable marker on hover

New to highcharts - I've got a chart that I have markers disabled on series

plotOptions: {
    series: {
        marker: {
            enabled: false
        }
    }
},

which is great for the drawing of the lines, but, when I hover over the chart the markers are there. this is good, however, I do not want the marker to be present if the y value on the xAxis is 0 (empty) but I do want them when the y value on the xAxis is greater than one.

I was able to do this before by just setting the y value to null, disabling hover for that series, but the nulls present on this series - drawn as a stacked areaspline graph causes the spline to get drawn improperly (no spline, jagged edges when using the connectNulls: true option in series.

I want this marker to be missing because there is no data on this day

I want the markers to be here when there is data

So how do I, and/or can I, conditionally disable a marker on hover based on the y value on an xAxis?

I have been looking at wrapping highcharts prototypes, which I am already doing to control some crosshair behavior drawCrosshair(): https://www.highcharts.com/docs/extending-highcharts/extending-highcharts but I can't seem to find anything that controls the drawing of the markers at that level

Solution

  • A dynamic approach to this is intercepting the setState-function of the Point.

    For example, wrapping it and preventing the handling if the y-value is 0:

    (function (H) {
  H.wrap(H.Point.prototype, 'setState', function (proceed, state, move) {
    if(this.y === 0) return;
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  });
}(Highcharts));

    See this JSFiddle demonstration of it in action.