Adjust the priority of the data points displayed in the scatter plot

[weijian.zhu2]

For example, there are two pieces of data in the scatter diagram, there will be two legends, and the same points overlap in the two pieces of data. Now I want to implement hover to legend to improve the level of highlighting of the whole data

[Manoj Mohan]

@weijian-zhu2,

With the help of itemouseover and itemmouseout event handler of legend, you can highlight the dataseries of the respective hovered legend. Please take a look at this code-snippet below for the same.

itemmouseover: function(e){
  for(var i=0; i<e.chart.data.length; i++) {

    if(i != e.dataSeriesIndex)
      e.chart.options.data[i].fillOpacity = 0;
  }
  e.chart.render();
},
itemmouseout: function(e){
  for(var i=0; i<e.chart.data.length; i++) {
    if(i != e.dataSeriesIndex)
      e.chart.options.data[i].fillOpacity = null;
  }
  e.chart.render();
}

Also, check out this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[weijian.zhu2]

Thanks