JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="addText" style="position:absolute; left:0px; top:0px;"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        labels: {
            items: [{useHTML: true,backgroundColor:'red',
                html: "<p>Box of text. But how do I set the Background Color??</p>",
                style: {
                    left: '0',
                    top: '20px',
                    width: '250px',
                    fontSize: '10px',
                    backgroundColor: '#fffdcc'
                }
            }]
        },
        series: [{
            name: 'Lots of Numbers',
            data: [
                [2008, 80282],
                [2009, 61702],
                [2010, 32972],
                [2011, 21516]
            ],
            color: '#5b6cb0'
        }]
    });

    var textX = 10;
    var textY = 80;
    var span = '<span id="labelText" style="position:absolute; text-align:center;width:100%; width:60px; background-color:red">';
    span += '<span style="font-size: 14px">Box of text with the background set.</span><br>';
    span += '</span>';

    $("#addText").append(span);
    span = $('#labelText');
    span.css('left', textX + (span.width() * -0.5));
    span.css('top', textY + (span.height() * -0.5));
});