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

回答1:

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

回答2:

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.

回答3:

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,
}

来源：https://stackoverflow.com/questions/25300184/show-data-labels-on-top-in-stacked-column-graph-in-highcharts

标签

javascript

jquery

graph

Highcharts