Highcharts Demo

author(s): Torstein Hønsi

by Kesav Telaprolu

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
  (function(H) {

    /**
     * Override the base drawDataLabels method by pie specific functionality
     */
    if (H.seriesTypes.pie) {
      H.seriesTypes.pie.prototype.drawDataLabels = function() {
        var series = this,
          data = series.data,
          point,
          chart = series.chart,
          options = series.options.dataLabels,
          connectorPadding = H.pick(options.connectorPadding, 10),
          connectorWidth = H.pick(options.connectorWidth, 1),
          plotWidth = chart.plotWidth,
          plotHeight = chart.plotHeight,
          connector,
          distanceOption = options.distance,
          seriesCenter = series.center,
          radius = seriesCenter[2] / 2,
          centerY = seriesCenter[1],
          outside = distanceOption > 0,
          dataLabel,
          dataLabelWidth,
          labelPos,
          labelHeight,
          halves = [ // divide the points into right and left halves for anti collision
            [], // right
            [] // left
          ],
          x,
          y,
          visibility,
          j,
          overflow = [0, 0, 0, 0]; // top, right, bottom, left

        // get out if not enabled
        if (!series.visible || (!options.enabled && !series._hasPointLabels)) {
          return;
        }

        // Reset all labels that have been shortened
        H.each(data, function(point) {
          if (point.dataLabel && point.visible && point.dataLabel.shortened) {
            point.dataLabel
              .attr({
                width: 'auto'
              }).css({
                width: 'auto',
                textOverflow: 'clip'
              });
            point.dataLabel.shortened = false;
          }
        });


        // run parent method
        H.Series.prototype.drawDataLabels.apply(series);

        H.each(data,...

JavaScript

Highcharts.chart('container', {
  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: '60%',

      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',
      connectorColor: 'grey',
      
      connectorWidth: 1,
      distance: -100,
      formatter: function() {
        if (this.percentage >= 20) return Math.round(this.percentage) + '%';

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

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

      }
    }
  }]
});