Set data label for each stacked column - Javascript highcharts

Javascript examples for highcharts:Column Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Column Chart

Description

Set data label for each stacked column

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {//from www  .  j  a va 2  s  .  c  om
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        credits: {
            enabled: false
        },
        title: {
            text: null
        },
        xAxis: {
            categories: [
                'Q1',
                'Q2',
                'Q3',
                'Q4'],
            title: {
                text: 'Year Quarter',
                margin: 20,
                style: {
                    fontFamily: 'Roboto',
                    fontSize: '14px',
                    fontWeight: '600'
                }
            },
            labels: {
                style: {
                    fontFamily: 'Roboto',
                    fontSize: '12px'
                }
            }
        },
        yAxis: [{
            stackLabels: {
                enabled: true,
                align: 'right',
                style: {
                    color: '#ff0000',
                    fontWeight: 'bold'
                },
                x: -5,
                verticalAlign: 'top'
            }
        }],
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: false
                }
            }
        },
        series: [{
            "name": "Plant",
                "data": [11, 34, 24, 11],
                "cost": 23
        }, {
            "name": "Ship",
                "data": [23, 13, 15, 24],
                "cost": 34
        }, {
            "name": "Equipment",
                "data": [23, 16, 24, 42],
                "cost": 33
        }, {
            "name": "Cargo",
                "data": [23, 34, 33, 24],
                "cost": 24
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px; width: 350px;"></div>  
   </body>
</html>

Related Tutorials