JSFiddle - React, Tailwind, and code Playground

by xionghongzhi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://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 () {
    function redrawConnectors() {
         var chart = this,
             d;
        
        Highcharts.each(chart.series[0].data, function(point, i) {
            if(point.connector) {
                d = point.connector.d.split(' ');
                d = [d[0], d[1], d[2], d[10], d[11], d[12]];
                point.connector.attr({
                    d:  d
                });
            }
        });
    }
    
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 1,//null,
            plotShadow: false,
            events: {
                load: redrawConnectors,
                redraw: redrawConnectors   
            }
        },
        title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
            		size: '60%',
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                alignTo: 'toPlotEdges',
                format: '<b>{point.name}</b>: {point.y}',
                y: -10,
                connectorShape: function (labelPosition, connectorPosition, options) {
                    var
                        touchingSliceAt = connectorPosition.touchingSliceAt,
                        alignment = labelPosition.alignment,
                        left = 10,
                        right = 10;
                    if (alignment == 'left') {
                        left = labelPosition.x + this.dataLabel.bBox.width + 16
                        right = labelPosition.x + 8
                    } else {
                        left = labelPosition.x - this.dataLabel.bBox.width - 16
                        right = labelPosition.x - 8
                    }
                    return ['M',
                       ...