JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/8.0.4/highcharts.js"></script>
<div id="actual_chart" style="height: 400px"></div>

JavaScript

var chartObj = new Highcharts.Chart({

    chart: {
        renderTo: 'actual_chart',
        defaultSeriesType: "column"
    },
    xAxis: {
        categories: ["Total", "Male", "Female"]
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                formatter: function() {
                    return this.y + "%";
                }
            }
        },
        bar: {
            dataLabels: {
                enabled: true
            }
        },
        column: {
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        layout: 'vertical',
        borderWidth: 1,
        backgroundColor: '#FFFFFF'
    },
    series: [
        {
        name: "Yes",
        data: [53, -47, -49]},
    {
        name: "No",
        data: [-51, -46, -54]},
    {
        name: "Not Sure",
        data: [-37, -42, -41]}
    ]
});