CODEWITHSUNDEEP
javascripthighcharts
Tales Santos
Tales Santos

Reputation: 242

Setting highcharts datalabels backgroundColor with the same color of its serie

I'm trying to set the backgroundColor of datalabels with the same color of its series (UI reasons).

I've tried to use the formatter option and return a "div" with the desired styles but only the font color applies to the dataLabel.

How can I solve this problem? Follow the code I'm trying.

$(function () {
    $('#container').highcharts({

        chart: {
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
                                     'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions : {
            series : {
                dataLabels : {
                    enabled : true,
                    formatter : function() {
                        return $('<div/>').css({
                            'color' : this.series.color, // works
                            'border' : '1px solid black', // don't work
                            'backgroundColor' : this.series.color // don't work
                        }).text(this.y)[0].outerHTML;
                    }
                }
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
        {
            data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]}]

    });
});

Link to live example: http://jsfiddle.net/eVfZD/

UPDATED:

The solution was simple. Just set the option "useHTML" to true and set the styles to the "div" created inside the formatter function.

Upvotes: 2

Views: 3108

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

If you are using html tags, set useHTML: true, that should resolve that issue: http://jsfiddle.net/eVfZD/1/

Upvotes: 3

Related Questions