Highcharts scatter plot tooltip

by Alagar Kamuthurai

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'scatter',
      zoomType: 'xy'
    },
    title: {
      text: 'Height Versus Weight of 507 Individuals by Gender'
    },
    subtitle: {
      text: 'Source: Heinz  2003'
    },
    xAxis: {
      title: {
        enabled: true,
        text: 'Height (cm)'
      },
      startOnTick: true,
      endOnTick: true,
      showLastLabel: true
    },
    yAxis: {
      title: {
        text: 'Weight (kg)'
      }
    },
    legend: {
     enabled: false
    },


    tooltip: {
      formatter: function() {
        if (this.series.name == "Male") {
          return "<b>" + this.series.name + "</b><br>" + this.x + " cm, " + this.y + " kg";
        } else return " ";

      }
    },

    series: [{
      name: 'Male',
      color: 'rgba(223, 83, 83, .5)',
      data: [
        {y:50,x:170,color:'red'},
        {y:54,x:130,color:'red'},
        {y:67,x:150,color:'blue'},
        {y:40,x:190,color:'red'},
        {y:50,x:120,color:'red'},
        {y:40,x:130,color:'green'}
      ]

    }]
  });
});