Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'scatter'
    },
    plotOptions: {
      series: {
        lineWidth:1,
			  states: {
				  hover: {
					  lineWidthPlus: 2,
            marker: {
              enabled: true,
              radius:3,
              states: {
                hover: {
                  fillColor:'#FF0000',
                  lineColor:'#00FF00',
                  lineWidth:3,
                  radius:12
                }
              }
            }  
				  }
			  },
        marker: {
          enabled: true,
          radius:3,
       	  states: {
 	   			  hover: {
              fillColor:'#FF0000',
              lineColor:'#00FF00',
              lineWidth:3,
              radius:12
        	  }
          }
        }
      }  
    },

  series: [{
     stickyTracking: false,
    events: {
      mouseOver: function() {
        this.data.forEach(p => p.setState('hover'))
      },
      mouseOut: function() {
        this.data.forEach(p => p.setState())
      }
    },
    data: [
      [29.9, 71.5],
      [106.4, 129.2],
      [144.0, 176.0],
      [135.6, 148.5],
      [216.4, 194.1],
      [95.6, 54.4]
    ]
  }]
});