JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 500px; height: 300px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        colors: [
            '#ff6600',
            '#333300',
            '#660000'],
            '#ff6600',
            '#333300',
            '#660000'],
        credits: {
            enabled: false
        },
        title: {
            text: ''
        },
        yAxis: {
            title: {
                text: 'Total percent market share'
            }
        },
        plotOptions: {
            series: {
                states: {
                    hover: {
                        enabled: false
                    }
                },
                point: {
                    events: {
                        mouseOver: function () {
                            this.options.oldColor = this.color;
                            this.graphic.attr("fill", "black");
                        },
                        mouseOut: function () {
                            this.graphic.attr("fill", this.options.oldColor);
                        }
                    }
                },
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.point.name + '</b>';
            }
        },
        series: [{
            name: 'Time',
            data: [
                ["1", 15],
                ["2", 15],
                ["3", 15],
                ["4", 15],
                ["5", 15],
                ["6", 15],
            ],
            dataLabels: {
                enabled: false
            }
        }]
    });
});