CODEWITHSUNDEEP
knockout.jshighcharts
user1676835
user1676835

Reputation: 1

Setting highcharts datalabels backgroundColor with the same color of its piechart series

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.

$(function() {
    // Create the chart
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        title: {
            text: 'Browser market share, April, 2011'
        },
        yAxis: {
            title: {
                text: 'Total percent market share'
            }
        },
  plotOptions : {
        series : {

        }
    },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
            }
        },
        series: [{
            name: 'Browsers',
            data: [["Firefox",6],["MSIE",4],["Chrome",7]],
            size: '60%',
            innerSize: '20%',
  dataLabels : {
                connectorwidth:0,
                enabled : true,
                useHTML: true,
                formatter : function() {
                    return $('<div/>').css({
                        'color' : this.series.color, //  don't work
                        'border' : '2px solid ', // work
                        'backgroundColor' : this.series.color // don't work
                    }).text(this.y)[0].outerHTML;
                }
            }

        }]
    });
});

Upvotes: 0

Views: 1031

Answers (1)

rakhmanoff
rakhmanoff

Reputation: 369

You can use this.point.color in you formatter:

formatter : function() {
    return $('<div/>').css({
        'color' : this.point.color, // work
        'border' : '2px solid ',    // work
        'backgroundColor' : '#fff'  // just white in my case
    }).text(this.y)[0].outerHTML;
}

updated jsfiddle: http://jsfiddle.net/m2urnx81/1/

Upvotes: 1

Related Questions