CODEWITHSUNDEEP
angularjshighchartshighcharts-ngangular2-highcharts
nbpeth
nbpeth

Reputation: 3148

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

Upvotes: 2

Views: 1463

Answers (2)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

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.

Upvotes: 2

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

A very static approach to this is simply addressing each point with Y-value of 0. Then you could disable the hover-marker for each of these. One such point would look like this (JSFiddle demo):

{
  y:0, 
  marker:{
    states:{
      hover:{
        enabled:false
      }
    }
  }
}

And used in a series:

series: [{
  marker: {
    enabled: false
  },
  data: [3, {y:0, marker:{states:{hover:{enabled:false}}}}, 3, 5, 1, 2, 12]
}]

As you can see, it's not pretty, but might help those who need an ad-hoc solution.

Upvotes: 4

Related Questions