plot a Stacked column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

plot a Stacked column 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.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <script src="https://code.highcharts.com/modules/export-data.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
var data = [/*from   w w  w.j  av  a 2s  . c  om*/
  ["isis", 14823424, 1012],
  ["isis", 7589888, 1011],
  ["isis_uv", 458752, 1115],
  ["bgp", 524066816, 1059],
  ["bgp_policy_reg_agent", 352256, 146],
  ["isis", 7655424, 1013],
  ["isis_policy_reg_agent", 290816, 314]
];
Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        var chart = this,
          categories = [],
          series = [];
        data.forEach(function(elem) {
          if (!categories.includes(elem[0])) {
            categories.push(elem[0])
          }
        })
        data.forEach(function(elemData) {
          series.push({
            name: elemData[2],
            data: (function() {
              var dataPoints = [];
              categories.forEach(function() {
                dataPoints.push(0)
              })
              categories.forEach(function(elemCategories, j) {
                if (elemCategories == elemData[0]) {
                  dataPoints[j] = elemData[1]
                }
              })
              return dataPoints
            })()
          })
        })
        chart.update({
          series: series,
          xAxis: {
            categories: categories
          }
        }, true, true)
      }
    }
  },
  title: {
    text: 'Chart title'
  },
  yAxis: {
    title: {
      text: 'Total Memory'
    },
    stackLabels: {
      enabled: true
    }
  },
  legend: {
    align: 'right',
    verticalAlign: 'top',
  },
  plotOptions: {
    column: {
      stacking: 'normal'
    }
  },
});

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

Related Tutorials