Multiple Labels

by Pranav Kulkarni

HTML

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

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

JavaScript

//gobin rajneesh

$(function() {


  // Create the chart
  $('#container').highcharts({
    chart: {
      type: 'pie',
      backgroundColor: 'rgba(0,0,0,0)',
      y: 100

    },
    title: {
      text: 'sfs '
    },
    yAxis: {
      title: {
        text: ' '
      }
    },
    plotOptions: {
      pie: {
        //                        y:1,
        shadow: false,
        //                        center: ['50%', '50%'],
        borderWidth: 0,
        showInLegend: false,
        size: '80%',
        innerSize: '0%',

        data: [
          ['allo', 18],
          ['asdad', 14],
          ['asdad', 11],
          ['asdasd', 10],
          ['adad', 8],
          ['asdada', 7],
          ['adada ada', 7],
          ['adad', 5],
          ['asdas', 7],
          ['ada', 3]

        ]
      }
    },
    tooltip: {
      valueSuffix: '%'
    },
    series: [{
      type: 'pie',
      name: 'Browser share',

      dataLabels: {
        color: 'white',
        distance: -20,
        formatter: function() {
          if (this.percentage != 0) return Math.round(this.percentage) + '%';

        }
      }
    }, {
      type: 'pie',
      name: 'Browser share',

      dataLabels: {
        connectorColor: 'grey',
        color: 'black',
        //                            y:-10,
        softConnector: false,
        connectorWidth: 1,
        verticalAlign: 'top',
        distance: 20,
        formatter: function() {
          if (this.percentage != 0) return this.point.name;

        }
      }
    }]
  });
});