column labels for column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

column labels for column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from w  w  w  .  j a va 2s  .  co  m
chart = new Highcharts.Chart({
    style: {
        fontFamily: 'Arial'
    },
    chart: {
        renderTo: 'container',
        type: 'column'
    },
    title: {
        text: ''
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: ["Location A","Location B","Location C"],
        title: {
            text: "Location"
        }
    },
    yAxis: {
        allowDecimals: false
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                formatter: function() {
                    if (this.y === 0) {
                        return null;
                    }
                    return this.y;
                },
                style: {
                    color: 'white'
                }
            }
        },
        column: {
            stacking: 'normal',
            borderWidth: 0
        }
    },
    series: [{
        "color": "rgb(0,0,255)",
        "name": "Open Jul",
        "data": [18, 2, 6],
        "stack": "Jul"
    },
    {
        "color": "rgb(255,0,0)",
        "name": "Overdue Jul",
        "data": [0, 0, 0],
        "stack": "Jul"
    },
    {
        "color": "rgb(0, 0, 255)",
        "name": "Open Aug",
        "data": [20, 1, 10],
        "stack": "Aug"
    },
    {
        "color": "rgb(255, 0, 0)",
        "name": "Overdue Aug",
        "data": [2, 1, 2],
        "stack": "Aug"
    }],
    yAxis: {
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: 'gray'
            },
            formatter: function() {
                return  this.stack;
            }
        }
    }
});
    });

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

Related Tutorials