Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can color of data label be different inside and outside of the bar in Highchart

I'm wondering that the color of the text which is inside the bar chart(plotOptions.bar.dataLabels.color) can be different if the text doesn't fit to bar length. For instance: enter image description here

Code is here:

$(function () {
$('#container').highcharts({
    chart: {
        type: 'bar',
        height: 700
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
        bar: {
            stacking: 'normal',
            pointPadding: 0,
            groupPadding: 0.2,
            dataLabels: {
                enabled: true,
                color: 'black',
                align: "right",
                format: '{y} M',
                inside: false,
                style: {
                    fontWeight: 'bold'
                },
                verticalAlign: "middle"
            },
        }
    },

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

});

Thanks in advance

like image 790
Adem İlhan Avatar asked Jun 03 '14 09:06

Adem İlhan


People also ask

How do I change colors in Highcharts?

To change the background color of the chart you have to set in the chart. backgroundColor property. Bar colors in the series color property. Check the example with your chart I posted below.

How do you put data labels inside a bar?

On the Layout tab, in the Labels group, click Data Labels, and then click the option that you want. For additional data label options, click More Data Label Options, click Label Options if it's not selected, and then select the options that you want.


3 Answers

Possible solution is to use formatter. Determine if value is lower than some level, and then change dataLabel color. For example: http://jsfiddle.net/Yrygy/176/

                formatter: function() {
                    var max = this.series.yAxis.max,
                        color =  this.y / max < 0.05 ? 'black' : 'white'; // 5% width
                    return '<span style="color: ' + color + '">' + this.y + ' M</span>';   
                },

You can also compare point's width with length of y-value string.

like image 144
Paweł Fus Avatar answered Nov 14 '22 22:11

Paweł Fus


I use the "isInside" value like so:

 series: [{
   name: 'Percentage',
   data: this.calculateChartSeries(),
   dataLabels: {
     enabled: true,
     rotation: 0,
     align: 'right',
     borderWidth: 1,
     formatter: function() {
       if (this.point.isInside == true) {
         return '<span style="color: white">' + this.y + '%</span>';
       } else {
         return '<span style="color: black">' + this.y + '%</span>';
       }
     }
   }
 }]
 

But if that doesn't work for you, it's possible to use "this.point.shapeArgs.height" and check if that height is greater than the length of your text.

like image 24
William Francis Avatar answered Nov 14 '22 22:11

William Francis


You can set the color to contrast, and it will change depending on whether the dataLabel is inside/outside the bar.

style: {
    color: 'contrast'
}
like image 37
Probocop Avatar answered Nov 14 '22 22:11

Probocop