Geek asks and answers

How to set background color of HTML Highcharts shortcut?

I am trying to create a Highcharts Label . One option is - style: CSSObjectbut, as with many high-level CSSObjects, it really doesn't want css. It throttles completely on background-color:, and I cannot find the syntax that really works.

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 to set the background color? Fiddle

+3
source share
2 answers

I do not think this is possible in the highcharts API. I suggest you just add your own html elements to the chart, for example.

<div id="addText" style="position:absolute; left:0px; top:0px;"></div>

var textX = 200;
var textY = 80;
var span = '<span id="labelText" style="position:absolute; text-align:center;width:150px;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));

http://jsfiddle.net/gGegL/

Confidently, being standad html / css, you can style the text as you want.

+2
source

Unfortunatel , SVG, , . 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();

http://jsfiddle.net/PT769/

+3

More articles:


All Articles