High Charts v3 overlapping

by Roydon DSouza

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<!-- Additional files for the Highslide popup effect -->
<script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide-full.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/media/com_demo/highslide.css" />

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
      $('#container').highcharts({
        chart: {
            type: 'areaspline',
			backgroundColor:'#272d31',
			 align: 'left'
			
        },
        title: {
            text: 'CPM, IMPS, SPEND, etc'
        },
		tooltip:{
			enabled:false
		},
        legend: {
			enabled:false,
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 0,
            y: 0,
            floating: true,
            borderWidth: 1,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        xAxis: {
            allowDecimals: false,
            labels: {
					useHTML: true,
                    formatter: function () {
                        return 'Week ' + this.value; // clean, unformatted number for year
                    }
            },
            
            max:7,
			 tickWidth: 0   
        },
        yAxis: {
			gridLineWidth:0,
            title: {
                text: 'No title required'
            }
        }, credits: {
            enabled: false
        },
       	plotOptions: {
            
		  areaspline: {
                fillOpacity: 0.1
            },

            series: {
                dataLabels: {
                    enabled: true,
                     backgroundColor: 'rgb(87, 188, 0)',
                    borderWidth: 1,
                    color: 'white',
                   formatter: function() {
     
   // console.log(this);
 
   // Michael Buen is here                    
  
 var search = this.series.chart.series[0].data;
                        
  
 var a = this.point;
 
 var overlapCount = 0;                    
 for(var i in search) {
         
  var b = search[i];
     console.log(b.y);
  var d = getDistance(a, b);
   
  // choose an overlap threshold
  var kiss = 5 * 2;
  var halfOverlap = 5;
  var fullOverlap = 2.5; // French kiss
  if (d <= kiss) {
   ++overlapCount;
  }
         
 }
 return...