Justify stack labels by setting up y axis - Javascript highcharts

Javascript examples for highcharts:Chart Label

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

Description

Justify stack labels by setting up y axis

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 () {//from ww  w. j a va  2s  .  c o 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: 'bottom',
                     align: 'left' ,
                     y: -40
                 }
                }],
        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