2

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

nbpeth
  • 2,967
  • 4
  • 24
  • 34

2 Answers2

4

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.

Halvor Holsten Strand
  • 19,829
  • 17
  • 83
  • 99
2

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.

Halvor Holsten Strand
  • 19,829
  • 17
  • 83
  • 99
  • this is perfect and goes in line with the plugin style approach I've gone with for working with scenarios like this - thank you so much – nbpeth Jan 11 '19 at 16:14