CODEWITHSUNDEEP
javascripthighchartsr-highcharter
John Hekman
John Hekman

Reputation: 27

Highcharts: Fade plotLines based on hover on marker

I have a scatter chart with a series. Some of the observations have corresponding limit values, which I have added as PlotLines. Say there are 2 unique PlotLines, and each scatter observation only belongs to one of them. As an added complication, there are multiple scatter series, so this has to work with all of them.

If there are 2 plotLines on the graph, upon the user hovering over one of the scatter points of any series, I only want the plotLine that belongs to that point to stay visible, and the others to fade.

I know this is a lot to ask for and may not be possible. I've started fiddling with this, from an example I found here: Highcharts: Add plotlines based on enabled series. I've modified the fiddle towards my problem, showing 2 data series, and the data in the 'plotline' variable indicating a 1 or 2. I don't know how to link this data to the plotLines though, and make them fade as explained.

JSFiddle: http://jsfiddle.net/7nghfemb/1/

var chart = Highcharts.chart('container', {

  yAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    plotLines: [{
        value: 50.5,
        color: 'red',
        width: 2,
        id: 'plot-line-1'
    },{
        value: 130.5,
        color: 'blue',
        width: 2,
        id: 'plot-line-2'
    }]
  },

  series: [{
    events: {
      show: function() {
        chart.yAxis[0].addPlotLine({
          value: 50.5,
          color: 'red',
          width: 2,
          id: 'plot-line-1'
        });
      },
      hide: function() {
        chart.yAxis[0].removePlotLine('plot-line-1')
      }
    },
    data: [
    {
        y: 29.9, 
        plotline: 1
    }, {
        y: 71.5,
      plotline: 2
    }, {
      y: 106.4,
      plotline: 1
    }, {
        y: 129.2,
      plotline: 1
    }],
    type: 'scatter'
  },
    {
    data: [
    {
        y: 145.9, 
        plotline: 2
    }, {
        y: 111.5,
      plotline: 2
    }, {
      y: 167.4,
      plotline: 1
    }, {
        y: 101.2,
      plotline: 2
    }],
    type: 'scatter'
  }]
});

Upvotes: 2

Views: 1004

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You can use mouseOver and mouseOut events to show or hide the plot lines:

plotOptions: {
    series: {
        point: {
            events: {
                mouseOver: function() {
                    var plotLines = this.series.yAxis.plotLinesAndBands;

                    plotLines.forEach(function(el, i) {
                        if (i === this.plotline - 1) {
                            el.svgElem.show();
                        } else {
                            el.svgElem.hide();
                        }
                    }, this);
                },

            }
        },
        events: {
            mouseOut: function() {
                var plotLines = this.yAxis.plotLinesAndBands;

                plotLines[0].svgElem.show();
                plotLines[1].svgElem.show();
            }
        }
    }
}

Live demo: http://jsfiddle.net/BlackLabel/vh1z97yr/

API Reference:

https://api.highcharts.com/class-reference/Highcharts.SVGElement#show

https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide

Upvotes: 0

Related Questions