How do I set the background color of a Highcharts HTML label?

Question

I'm trying to style a Highcharts Label. One of the options is style: CSSObject but as with many Highcharts CSSObjects, it doesn't actually want css. It chokes completely on background-color: and I can't seem to find a syntax that does work.

labels: {
            items: [{
                html: "<p>Box of text. But how do I set the Background Color?</p>",
                style: {
                    left: '60px',
                    top: '20px',
                    width: '250px',
                    fontSize: '10px',
                    backgroundColor: '#fffdcc'
                }
            }]
        },

How do I set the background color? Fiddle

Answer 1

Unfortunatel it is not possible, because labels objects are translated to SVG elements, which don't include your styles like background. You can use workaround and add text by renderer and background by rect().

var point = chart.series[0].data[8];

    var text = chart.renderer.text(
            'Max', 
            point.plotX + chart.plotLeft + 10, 
            point.plotY + chart.plotTop - 10
        ).attr({
            zIndex: 5
        }).add();

    var box = text.getBBox();
    chart.renderer.rect(box.x - 5, box.y - 5, box.width + 10, box.height + 10, 5)
        .attr({
            fill: '#FFFFEF',
            stroke: 'gray',
            'stroke-width': 1,
            zIndex: 4
        })
        .add();

Example http://jsfiddle.net/PT769/