CODEWITHSUNDEEP
javascriptjquerygraphhighcharts
alwaysLearn
alwaysLearn

Reputation: 6950

Show data labels on top in stacked column graph in highcharts

Is it possible to show datalabels on top of columns in stacked graph ? Fiddle is here

I want to show the labels on the top of column.

$(document).ready(function(){
   var test = [100,0,0,0,0];
   plotDataGroupedByAge(test);
})

function plotDataGroupedByAge(data)
{
   $('#graph_agerange').highcharts({
        chart: {
            type: 'column',
            backgroundColor:'#EFEFEF'
        },
        title: {
            align : "left",
            style:{
               'color':'#26DBA9',
               fontSize   : '20',
               fontWeight :'bold'
            },
            text: 'Age Range'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [
                '15-30',
                '30-45',
                '45-60',
                '60-75',
                '75+',
            ],
            labels: {
                  style: {
                        fontSize   : '15',
                        fontWeight :'bold'
                     }
              },
            lineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',  
            minorTickLength: 0,  
            gridLineWidth: 0,
            tickColor: '#EFEFEF',
        },
        yAxis: {
            max: 100,
            title: {
                text: ''
            },
             labels: {
                  enabled: false
              },
                stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'red'
                }
            },
            gridLineWidth: 0,
            minorGridLineWidth: 0
        },
        credits:false,

        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                stacking: 'normal',     
                pointWidth: 45
            },

        },
        series: [{
                  name: '',
                  data: [100, 100, 100, 100,100],
                  color:'#E1E3E3',
                  showInLegend: false
                },
                {
                  name: '',
                  data: data,
                  color:'#FE9B00',
                  dataLabels:{enabled:true},
                  showInLegend: false,               
                }
             ]
    });
}

EDIT

Basically I want to show each column as percent show I kept stacked columns , One in gray with value fixed as 100 and one in orange to show percent.

I want final output something which is similar to

enter image description here

Upvotes: 1

Views: 6050

Answers (3)

BJax
BJax

Reputation: 153

This didn't work for your example, but it did work for my columnrange where I was trying to do the same thing and it is way easier so I thought I would add it for people to try before messing with custom formatting.

adding the yAxis property opposite and set it to true worked for me. Unfortunately when trying it in your fiddle it didn't work in this specific instance. 

yAxis:{
  opposite: true,
}

Upvotes: 0

FittyFrank
FittyFrank

Reputation: 134

Even more simple than a function, you can just set the verticalAlign property to top and then set the y property to -20.

Setting verticalAlign to "top" will move the data label toward the top of the column, but it is still within the column itself. However, this is the same relative location on all columns, so setting the y to -20 will move the data label up by 20 placing it just above the column. You can adjust the y value to your needs.

This works for me on a stacked column chart with a line chart overlay as well. I have one data label per column which shows the {point.stackTotal} for each column.

Upvotes: 0

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can use a loop over each point and translate position by attr() function.

    var max = chart.yAxis[0].toPixels(chart.series[0].data[0].y, true);

    $.each(chart.series[1].data, function (i, d) {
        d.dataLabel.attr({
            y: max - 20
        });
    });

Example: http://jsfiddle.net/sbochan/L02awbfe/7

Upvotes: 3

Related Questions