JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div class="chartinfo"></div>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

CSS

.highcharts-tooltip .bubble{
    padding: 4px 8px;
    background-color: rgb(239,68,46);
    border-radius: 3px;
}
.highcharts-tooltip{
    visibility: hidden;
}
.bubble-tip{}
.bubble-tip div{
    font-family: "ff-din-web-1", "ff-din-web-2", Arial, sans-serif;
    background-color: rgb(239,68,46);
    margin: 0 auto;
    height: 1px;
}
.bubble-tip .bt-6{
    width: 13px;
}
.bubble-tip .bt-5{
    width: 11px;
}
.bubble-tip .bt-4{
    width: 9px;
}
.bubble-tip .bt-3{
    width: 7px;
}
.bubble-tip .bt-2{
    width: 5px;
}
.bubble-tip .bt-1{
    width: 3px;
}
.bubble-tip .bt-0{
    width: 1px;
}

JavaScript

$(function () {
    function formatMoney(num){
        num = num.toString().replace(/\$|\,/g, '');
        if (isNaN(num)) num = "0";
        sign = (num == (num = Math.abs(num)));
        num = Math.floor(num * 100 + 0.50000000001);
        cents = num % 100;
        num = Math.floor(num / 100).toString();
        if (cents < 10) cents = "0" + cents;
        for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
        num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
        return ((sign) ? '' : '-') + '$' + num;
    }
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            colors:['rgb(0,95,100)'],
            title: {
                text: null
            },
            credits: {
                enabled: false
            },
            subtitle: {
                text: null
            },
            xAxis: {
                categories: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011'],
                tickWidth: 0,
                lineColor: "rgb(0,0,0)",
                labels:{
                    y:22,
                    style:{
                        fontSize: "1.2em",
                        color: "rgb(0,0,0)",
                        fontFamily: "ff-din-web-1"
                    }
                },
            },
            yAxis:{
                title: null,
                labels:{
                    enabled:false
                },
                gridLineWidth: 0
            },
            tooltip: {
                enabled: true,
                animation: false,
                backgroundColor: "transparent",
                borderRadius: 3,
                borderWidth: 0,
                shadow: false,
                useHTML: true,
                style:{
                    color:...