JSFiddle - React, Tailwind, and code Playground

by Thomas Verstraete

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 500px;"></div>

JavaScript

$(function () {
    Highcharts.setOptions({
        lang: {
            thousandsSep: ','
        },
        chart: {
            style: {
                fontFamily: 'Myriad'
            }
        },
        colors: [
            'rgb(97,70,59)',
            'rgb(129,123,59)',
            'rgb(0,125,171)',
            'rgb(240,50,46)',
            'rgb(175,186,102)',
            'rgb(228,21,58)',
        ]
    });

    var options = {

        chart: {
            renderTo: 'container',
            align: 'top',
            type: 'pie'
        },

        credits: {
            enabled: false,
        },
        exporting: {
            enabled: false
        },
        title: {
            text: ''
        },
        plotOptions: {
            pie: {
                center: ['30%', '60%'],
                animation: false,
                borderWidth: 3,
                dataLabels: {
                    enabled: true,
                    crop: false,
                    overflow: 'none',
                    softConnector: false,
                    connectorWidth: 2,
                    formatter: function() {
                        return this.key + "<br>" + this.percentage.toFixed(2) + '%';
                    }
                }
            }
        },
        xAxis: {
            categories: []
        },
        series : [],
    };

    var series = {
        data: [
            {
                type:'pie',
                name: 'Example 1',
                y: 5000
            },
            {
                type:'pie',
                name: 'Example 2',
                y: 2150
            },
            {
                type:'pie',
                name: 'Example 3',
                y: 3000
            },
            {
                type:'pie',
                name: 'Example 4',
                y: 8000
            },
            {
                type:'pie',
                name: 'Example 5',
                y: 5000
            },
            {
    ...