Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="asset_donut" style="width:570px;height:270px;">
</div>

CSS

#asset_donut svg > text {
  display: none !important;
}
#asset_donut .connections {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#asset_donut .connections .connection {
  position: absolute;
}
#asset_donut .connections .connection.border-left {
  border-left: 1px solid #000000;
}
#asset_donut .connections .connection.border-right {
  border-right: 1px solid #000000;
}
#asset_donut .connections .connection.border-top {
  border-top: 1px solid #000000;
}
#asset_donut .connections .connection.border-bottom {
  border-bottom: 1px solid #000000;
}
#asset_donut .highcharts-data-labels .right-label {
  right: 0 !important;
  left: auto !important;
}
#asset_donut .highcharts-data-labels .right-label > span {
  left: auto!important;
  right: 0!important;
}
#asset_donut .highcharts-data-labels .left-label {
  left: 0 !important;
  right: auto !important;
}
#asset_donut .highcharts-data-labels > div > span {
  display: block;
  top: -1px !important;
  left: 0px !important;
}
#asset_donut .highcharts-data-labels > div > span > span {
  font-size: 120%;
  font-family: 'swis_medium', 'sw721md', 'Swis721 Md BT Medium', 'Helvetica Neue', helvetica, arial !important;
}

JavaScript

var $els = [];
var data = {
    "assets":[
        ['Australian shares', 25],
        ['Overseas shares', 30],
        ['Property', 10],
        ['Alternatives', 25],
        ['Fixed interest', 5],
        ['Cash', 5]
    ]
};
$(function() {
    $els.window = $(window);
    $els.asset_donut = $('#asset_donut');
    $els.asset_donut_spinner = $('#asset_donut_spinner');

    var graphWidth = 0;
    var labelPositions = [];
    var connectorPositions = [];
    var padding = 10;

    var resetConnectionVariables = function(){
        $('#asset_donut .connections').remove();
        graphWidth = 0;
        labelPositions = [];
        connectorPositions = [];
    }

    var createConnectionClasses = function(connector, top, left, width, height){
        var classes = [];
        if(height > padding){
            if(connector[2]){
                classes.push('border-right');
            }else{
                classes.push('border-left');
            }
        }
        if(width > padding){
            if(connector[3]){
                classes.push('border-top');
            }else{
                classes.push('border-bottom');
            }
        }
        return classes.join(' ')
    }

    var createConnections = function(){
        var container = $els.asset_donut.find('.highcharts-container');
        var connections = $('<div class="connections" />');
        var containerWidth = container.width();
        for(var x = 0; x < labelPositions.length; x++){
            var connection = $('<div class="connection" />');
            var top = labelPositions[x][1];
            var left = labelPositions[x][0];
            var width = Math.abs(labelPositions[x][0] - connectorPositions[x][0]);
            var height = Math.abs(labelPositions[x][1] - connectorPositions[x][1]);
            // if label is to the left of the graph point
            if(connectorPositions[x][2]){
                width = left + width - padding;
                left = padding;
            }else{
...