xAxis - point specific label positions for water fall chart - Javascript highcharts

Javascript examples for highcharts:Chart Label

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

Description

xAxis - point specific label positions for water fall 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"> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
  chart: {/*from   w ww. j  a v  a2s  .  co  m*/
    type: 'waterfall',
    events: {
      load: function() {
        var chart = this,
          point;
        Highcharts.objectEach(chart.xAxis[0].ticks, function(tick) {
          if (!tick.isNewLabel) {
            point = chart.series[0].points[tick.pos];
            tick.label.attr({
              y: point.plotY + chart.plotTop + point.shapeArgs.height + 15
            })
          }
        });
      }
    }
  },
  xAxis: {
    type: 'category'
  },
  legend: {
    enabled: false
  },
  series: [{
    upColor: Highcharts.getOptions().colors[2],
    color: Highcharts.getOptions().colors[3],
    data: [{
      y: 120000
    }, {
      y: 569000
    }, {
      y: 231000
    }, {
      isIntermediateSum: true,
      color: Highcharts.getOptions().colors[1]
    }, {
      y: -342000
    }, {
      y: -233000
    }, {
      isSum: true,
      color: Highcharts.getOptions().colors[1]
    }],
    pointPadding: 0
  }]
});

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

Related Tutorials