Justify stack labels in column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

Justify stack labels in 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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {// w  ww.  java  2 s. co  m
    $('#container').highcharts({
        chart: { type: 'column' },
        title: { text: '' },
        xAxis: { categories: [""] },
        yAxis: [{ title: { text: '', style: { color: '#4572A7'} },
                 labels: { formatter: function () { return Highcharts.numberFormat(this.value, 0) + "USD" },
                          style: { color: '#4572A7' } },
                 stackLabels: {
                     enabled: true,
                     style: { fontSize: '1.5em', fontWeight: 'bold', color: 'black' },
                     formatter: function () { return this.stack; },
                     rotation: -90, x: -5,
                     verticalAlign: 'middle',
                     align: 'left'
                 }
                }],
        legend: { borderWidth: 1, shadow: false },
        plotOptions: { column: { stacking: 'normal' }, series: { shadow: false} },
        series: [
            { data: [34, 34, 54, 12, 23], stack: 'Stack 1'}]
    });
});

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

Related Tutorials