stacked column and show total when a stack is hidden - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

stacked column and show total when a stack is hidden

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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from  w  w  w.  j  a v  a  2  s  .  co  m*/
$(function() {
  var data1 = [14, 12, 10, 13, 10, 7, 11, 11, 11, 8, 8, 10];
  var data2 = [2, 4, 5, 1, 2, 7, 6, 4, 1, 1, 3, 0];
  var data3 = [7, 13, 20, 10, 20, 19, 20, 26, 25, 19, 18, 17]
  var sums = Object.keys(data1).map(i => {
    return data1[i] + data2[i] + data3[i];
  });
  Highcharts.setOptions({
    colors: ['#f59000', '#2274c1', '#90aaef']
  });
  $('#container').highcharts({
    chart: {
      borderColor: '#cccccc',
      borderWidth: 2,
      marginTop: 43,
      type: 'column'
    },
    xAxis: {
      categories: ['2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015'],
      tickLength: 20
    },
    yAxis: {
      min: 0,
      max: 45,
      reversedStacks: false,
      tickInterval: 5,
      title: {
        text: null
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
        }
      }
    },
    credits: {
      enabled: false
    },
    title: {
      text: 'Number of procedures per year',
      y: 18
    },
    tooltip: {
      headerFormat: '<b>Year {point.x}</b><br/>',
      pointFormat: '{series.name}: {point.y}<br/>Total procedures: {point.total}',
      pointFormatter: function () {
        return this.series.name + ': ' + this.y + '<br/>Total procedures: ' + sums[this.x];
      }
    },
    plotOptions: {
      column: {
        stacking: 'normal',
        dataLabels: {
          enabled: true,
          color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
        }
      }
    },
    series: [{
      name: 'Resolved before conciliation',
      data: data1
    }, {
      name: 'Conciliation successful',
      data: data2
    }, {
      name: 'Expert\'s decision',
      data: data3
    }]
  });
});
    }

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

Related Tutorials