Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" ></div>

JavaScript

$(function () {
    
  function intersectRect(r1, r2) {
    return !(r2.x - r2.width/2 > r1.x + r1.width/2 || r2.x + r2.width/2 < r1.x - r1.width/2 || r2.y > r1.y + r1.height || r2.y + r2.height < r1.y);
  }
  
 
  function hideOverlappingLabels() {
    var items = this.series[0].data;
    var len = items.length;
      
    for (var i = 0; i < len-1; ++i) {
      var label1 = items[i].dataLabel;
        
      for (var j = i+1; j < len; ++j) {
        var label2 = items[j].dataLabel;
          
        if (label1.visibility != 'hidden' && label2.visibility != 'hidden' && intersectRect(label1, label2)) {
          if (label1.y < label2.y) label1.hide(); else label2.hide();
        }
      }
    }  
  }

  
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: '#888',
            plotBorderWidth: null,
            plotShadow: false,
            events: {
                redraw: hideOverlappingLabels,
                load: hideOverlappingLabels
            }
        },
        tooltip: {
          enabled: false
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    distance: -20,
                    color: '#fff',                    
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox1',   45.0],
                ['IE1',       26.8],
                {
                    name: 'Chrome1',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari1',    8.5],
                ['Opera1',     6.2],
                ['Others1',   0.7],
              
              ['Firefox2',   45.0],
                ['IE2',      ...