JSFiddle - React, Tailwind, and code Playground

by anikettiwari

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: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

JavaScript

$(function() {
  var H = Highcharts,
    pick = H.pick;
  H.seriesTypes.pie.prototype.connectorPath = function(labelPos) {
    var x = labelPos.x,
      y = labelPos.y,
      M = 'M',
      L = 'L';
     
    return pick(this.options.dataLabels.softConnector, true) ? [
      M,
      x + (labelPos[5] === 'left' ? 5 : -5), y, // end of the string at the label
      'C',
      x, y, // first break, next to the label
      2 * labelPos[2] - labelPos[4], 2 * labelPos[3] - labelPos[5],
      labelPos[2], labelPos[3], // second break
      L,
      labelPos[4], labelPos[5] // base
    ] : [
      M,
      x + (labelPos[5] === 'left' ? 20 : -20), y, // end of the string at the label
      L,
      labelPos[4] + (labelPos[5] === 'left' ? 5 : -5), y, // second break
      L,
      labelPos[4], labelPos[5] // base
    ];
  };


  $(document).ready(function() {

    // Build the chart
    $('#container').highcharts({
      chart: {
        type: 'pie',
        margin: 0,
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
      },
      title: {
        text: ''
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        series: {
          states: {
            hover: {
              enabled: false
            }
          }
        },
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          startAngle: 0,
        endAngle: 180,
       // cursor: 'pointer',
        center: [0, 125],
          dataLabels: {
            enabled: true,
            style: {
              color: '#666',
              fontSize: '14px',
              fontWeight: 'normal',
              textShadow: 'none'
            },
            softConnector:true,
          },
          showInLegend: false
        }
      },
      series: [{
        name: 'Brands',
        colorByPoint: true,
        size: '60%',
        data: [{
          name: 'IE',
          y: 85
 ...