CODEWITHSUNDEEP
javascriptjqueryhtmlcsshighcharts
vlio20
vlio20

Reputation: 9295

Highcharts bar data labels position

I am trying to align the data labels of the following fiddle in the middle of each bar (without success). It seems the that the data label at the top and on the bottom are making this thing look bad. also the tallest's bar label is overlapping with the bar itself.

I looked through the docs but couldn't make this thing look well.

Here is the fiddle: http://jsfiddle.net/9qLkx1f1/

Here is the data labels settings:

 plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
                useHTML: true,
                formatter: function() {
                    return this.series.name + "<span style='color:#0D2A4D; opacity:0.5;'> (" + this.y + "%) </span>";
                }
            }
        },
        series: {
             groupPadding: 0,
             minPointLength: 20,
             pointPadding: 0.2, 
             pointWidth: 10
        }
    },

Upvotes: 0

Views: 3008

Answers (2)

Swetha
Swetha

Reputation: 746

Set padding :0 inside plotOptions.

 plotOptions: {
        bar: {
            dataLabels: {
                   padding :0, 
             }
        }
 }

and set yaxis tickinterval 

  yAxis: {
        tickInterval : 80,
  }

Fiddle: http://jsfiddle.net/9qLkx1f1/14/

Upvotes: 2

Richa
Richa

Reputation: 3289

Simply Increase height in following code. Hope i have understood you. If i am wrong please correct me

FIDDLE DEMO

 $('#container').highcharts({
        chart: {
            type: "bar",
            height: 150, <---- This is the change
            events: {
                redraw: function () {
                    //$(window).trigger('resize');
                },
                load: function () {
                    //$(window).trigger('resize');
                }
            }
        },

Hope that is what you were looking for

Upvotes: 0

Related Questions