JSFiddle - React, Tailwind, and code Playground

by Tim Nguyen

HTML

<div id="pie-chart"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

JavaScript

$( function() {

    $( "#pie-chart" ).highcharts( {
        title: {
            text: ""
        },
        tooltip: {
            enabled: false
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: "pointer",
                dataLabels: {
                    enabled: true,
                    format: "<strong>{point.name}</strong><br>{point.percentage:.0f}%",
                    distance: -60,
                    color: "white"
                }
            },
            series: {
                allowPointSelect: true,
                point: {
                    events: {
                        select: function() {}
                    }
                }
            }
        },
        series: [ {
            type: "pie",
            data: [
                {
                    name: "Not too much text here",
                    color: "#5cb85c",
                    y: 35
                },
                {
                    name: "Not too much text here",
                    color: "#5bc0de",
                    y: 30
                },
                {
                    name: "Less text here",
                    color: "#78629b",
                    y: 15
                },
                {
                    name: "Less text here",
                    color: "#f0ad4e",
                    y: 10
                },
                {
                    name: "Less text here",
                    color: "#d9534f",
                    y: 10
                }
            ]
        } ]
    } );
} );