Variable radius pie

author(s): Grzegorz Blachliński

by anikettiwari

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>

CSS

#container {
	height: 500px;
}
.cls1{
  font-size: 30px;
  font-family: 'proxima_nova_light';
  font-weight: 300;
  color: $color_black;
}
.cls2{
  font-size: 14px;
  font-family: 'proxima_nova_regular';
  font-weight: 300;
  color: '#000';
  position: relative;
  top: -5px;
  padding-top: 5px;
  left: 5px;
  padding-right: 5px;
}

.highcharts-figure, .highcharts-data-table table {
    min-width: 320px; 
    max-width: 700px;
    margin: 1em auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

var total = 80;
Highcharts.chart('container', {
    chart: {
      type: 'variablepie',
      height: 370,
      marginBottom: 50,
	  events: {
	  	render() {
			let chart = this;
			
			chart.series[0].points[0].dataLabel.attr({y: 10});
		//	chart.series[0].points[0].connector.hide();
		}
	  }
    },
    credits: {
      enabled: false
    },
    title: {
      text: 'Football vs cricket',
      align: 'center',
      y: -5,
      verticalAlign: 'bottom',
      style: {
        fontFamily: 'proxima_nova_bold',
        fontSize: '20px',
        fontWeight: 'normal',
        color: '#8d99ab',
      }
    },
    subtitle: {
      text: '&nbsp;&nbsp;' + total + '<br/> Total',
      useHTML: true,
      verticalAlign: 'middle',
      y: -20
    },
    xAxis: {
      labels: {
        rotation: 0
      }
    },
    plotOptions: {
      variablepie: {
        size: 220,
        dataLabels: {
          enabled: true,
          connectorColor: '#979797',
          useHTML: true,
          formatter: function () {
            var key;
            if(this.key == 'football'){
              key = 'as football / Lionel Messi';
            }else if(this.key == 'cricket'){
              key = 'as cricket / Sachin Tendulkar';
            }else{
              key = this.key;
            }
            return '<span class=cls1>' + this.y + '</span>' + '<span class=cls2>' +  key + '</span>';
          },
		  positioner() {
		  	
		  }
        },
        showInLegend: true,
      }
    },
    tooltip: {
      formatter: function() {
        return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
      }
    },
    legend: {
      enabled: false
    },
     series: [{
      minPointSize: 10,
      innerSize: '70%',
      zMin: 0,
      data: [{name: "football", y: 71, z: 30}, {name: "cricket", y: 2, z: 18}]
    }]
});