display several labels in waterfall chart - Javascript highcharts

Javascript examples for highcharts:Chart Label

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

Description

display several labels in waterfall 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://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function() {/*ww  w  .  j a va  2 s. c o m*/
  var addLabels = function(chart) {
    $('.custom').remove();
    var series = chart.series[0],
      url;
    Highcharts.each(series.data, function(p, i) {
      if (i) {
        chart.renderer.label(p.secondLabel, p.plotX + chart.plotLeft, p.yBottom + chart.plotTop).attr({
          'text-anchor': 'middle'
        }).addClass('custom').add();
        if (p.y > 0) {
          url = 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Arrow_up.svg/1000px-Arrow_up.svg.png';
        } else {
          url = 'https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png'
        }
        chart.renderer.image(url, p.plotX + chart.plotLeft, chart.plotTop + chart.plotHeight - 15, 8, 13).addClass('custom').add()
      }
    });
  };
  $('#container').highcharts({
    chart: {
      type: 'waterfall',
      events: {
        load: function() {
          addLabels(this);
        },
        redraw: function() {
          addLabels(this);
        }
      }
    },
    xAxis: {
      type: 'category'
    },
    series: [{
      upColor: Highcharts.getOptions().colors[2],
      data: [{
        name: 'Start',
        y: 120000,
        secondLabel: '224'
      }, {
        name: 'Product Revenue',
        y: 569000,
        secondLabel: '122'
      }, {
        name: 'Service Revenue',
        y: 231000,
        secondLabel: '2$'
      }, {
        name: 'Fixed Costs',
        y: -342000,
        secondLabel: '212'
      }, {
        name: 'Variable Costs',
        y: -233000,
        secondLabel: '22'
      }],
      dataLabels: {
        enabled: true,
        formatter: function() {
          return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
        },
        inside: false,
      },
    }]
  });
});

      </script> 
   </head> 
   <body> 
      <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>  
   </body>
</html>

Related Tutorials