Highcharts Demo

author(s): Torstein Hønsi

by Torstein Hønsi

HTML

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

JavaScript

$(function () {

    (function (H) {


        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);
        }

        H.wrap(H.seriesTypes.pie.prototype, 'placeDataLabels', function (proceed) {
            
            proceed.call(this);
            
            var items = this.points;
            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.attr({ y: -999 });
                        } else {
                            label2.attr({ y: -999 });
                        }
                    }
                }
            }
        });
    }(Highcharts));


    $('#container').highcharts({
        chart: {
            plotBackgroundColor: '#888',
            plotBorderWidth: null,
            plotShadow: false,
        },
        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:...