Format labels on grouped stacked bar diagram with $ k, M for currency and 'hours' for time - Javascript highcharts

Javascript examples for highcharts:Stack Chart

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

Description

Format labels on grouped stacked bar diagram with $ k, M for currency and 'hours' for time

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() {/*w  w  w .  j  a  v  a 2  s. c om*/
Highcharts.setOptions({
   lang: { thousandsSep: "," }
});
$('#container').highcharts({
    chart: {
      type: 'column'
    },
    title: {
      text: 'Lorem Ipsum Title'
    },
    credits: {
      enabled: false
    },
    colors: ['#9C9F84', '#5C755E', '#E7CCA4', '#A97D5D'],
    xAxis: {
      categories: ['Jan', 'Feb', 'March']
    },
    yAxis: [{
      title: {
        text: 'Hours (in thousands)'
      },
      labels: {
        formatter: function() {
          return Highcharts.numberFormat(this.value/1000,0)
        }
      },
      reversedStacks: false,
      stackLabels: {
        enabled: true,
        formatter: function() {
          return Highcharts.numberFormat(this.total,1)
        }
      },
    }, {
      title: {
        text: 'Revenue (in thousands)'
      },
      labels: {
        formatter: function() {
          return '$' + Highcharts.numberFormat(this.value/1000,0)
        }
      },
      stackLabels: {
        enabled: true,
        formatter: function() {
          return '$' + Highcharts.numberFormat(this.total,0)
        }
      },
      opposite: true,
      reversedStacks: false
    }],
    tooltip: {
      formatter: function() {
        seriesName = this.series.name;
        if (seriesName.indexOf('Hours') >= 0) {
          return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 0) + ' hrs';
        } else {
          return '<b>' + this.x + '</b><br/>' + this.series.name + ': $' + Highcharts.numberFormat(this.y, 0);
        }
      }
    },
    plotOptions: {
      column: {
        stacking: 'normal',
        dataLabels: {
          enabled: true,
          color: 'white',
          style: {
            textShadow: '0 0 1px black'
          }
        }
      }
    },
    series: [{
      name: 'Hours Billed',
      data: [1620.5, 1225.2, 1818.6],
      stack: 'hours'
    }, {
      name: 'Hours Not Billed',
      data: [8847.5, 3566.3, 2518.3],
      stack: 'hours'
    }, {
      name: 'Invoiced',
      data: [{
        dataLabels: {
          format: "${y}"
        },
        y: 801500
      }, 982100, 581100],
      stack: 'revenue',
      yAxis: 1
    }, {
      name: 'Not invoiced',
      data: [2390, 4270, 7090],
      stack: 'revenue',
      yAxis: 1
    }]
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <script src="https://raw.githubusercontent.com/highcharts/highcharts/master/js/themes/gray.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials