detect if point is first in column stack chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

detect if point is first in column stack chart

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 () {/* w  w  w .j a  v  a2  s. c  om*/
    $('#container').highcharts({
        xAxis: {
            categories: ['Event1', 'Event2']
        },
        yAxis: {
           reversedStacks: false
        },
        chart: {type: 'bar'},
            plotOptions: {
          series: {
            stacking: 'percent',
            dataLabels: {
              enabled: true,
              allowOverlap: true,
              formatter: function(){
                return this.series.index == 0 ? this.x : null;
              }
            }
          }
        },
            series: [{
           name: 'Available',
           data: [
             18,
             20
           ]
        }, {
          name: 'Purchased',
          data: [
            23,
            40
          ]
        }]
    });
});
function pointIsFirstInStack(d) {
  return true;
}
function labelFormat(d) {
  return d.x;
}

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

Related Tutorials