stacked column chart stackLabels when axis is reversed - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

stacked column chart stackLabels when axis is reversed

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container {/*  www.j  a va 2  s.  co m*/
   min-width: 310px;
   max-width: 800px;
   height: 400px;
   margin: 0 auto
}


      </style> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
$(function () {
  var chart = new Highcharts.chart( {
    chart: {
      renderTo :'container',
      type: 'column'
    },
    title: {
      text: 'Stacked bar chart'
    },
    exporting:{enabled:false},
    credits:{enabled:false},
    xAxis: {
      type: 'datetime'
    },
    yAxis: {
      min: -10,
      max:100,
      reversed:true, //Removing reversed fixes stack labels issue
      title: {
        text: null
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
    },
    plotOptions:{
      column:{
        stacking:'normal'
      }
    },
    series: [{
      name: 'Category I',
      data: [
        [Date.UTC(2014, 5, 14), 20],
        [Date.UTC(2014, 5, 15), 30],
        [Date.UTC(2014, 5, 16), 25],
        [Date.UTC(2014, 5, 19), 10],
        [Date.UTC(2014, 5, 20), 15]
      ]
    }, {
      name: 'Category II',
      data: [
        [Date.UTC(2014, 5, 14), 25],
        //[Date.UTC(2014, 5, 15), 10],
        [Date.UTC(2014, 5, 16), 35],
        [Date.UTC(2014, 5, 19), 25],
        [Date.UTC(2014, 5, 20), 5]
      ]
    }, {
      name: 'Category III',
      data: [
        [Date.UTC(2014, 5, 14), 10],
        [Date.UTC(2014, 5, 15), 20],
        [Date.UTC(2014, 5, 16), 35],
        //[Date.UTC(2014, 5, 19), 25],
        [Date.UTC(2014, 5, 20), 15]
      ]
    }]
  });
});

      </script>  
   </body>
</html>

Related Tutorials