JSFiddle - React, Tailwind, and code Playground

by marianico2

HTML

<style>
#piechart {
  margin-top: 2em;
  margin-bottom: 2.5em;
  margin: auto;
}
</style>
<div id="piechart" style="min-width: 310px; max-width: 800px; height: 300px;"></div>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script>

var pieColors = (function () {
    var colors = [],
        base = '#f0a319',
        i;

    for (i = 0; i < 4; i += 1) {
        // Start out with a darkened base color (negative brighten), and end
        // up with a much brighter color
        colors.push(Highcharts.Color(base).brighten(i/9).get());
    }
    return colors;
}());


Highcharts.chart('piechart', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: ''
    },
    credits: false,
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            colors: pieColors,
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.0f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        name: 'Allocation',
        colorByPoint: true,
        data: [{
            name: 'Mintos',
            y: 30
        }, {
            name: 'Envestio',
            y: 25
        }, {
            name: 'Grupeer',
            y: 25
        }, {
            name: 'Estateguru',
            y: 20
        }]
    }]
});
</script>