Display Stack label in bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

Display Stack label in bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Grouped categories demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript" src="http://blacklabel.github.io/grouped_categories/grouped-categories.js"></script> 
      <link rel="stylesheet" type="text/css" href="http://blacklabel.github.io/grouped_categories/css/styles.css"> 
      <style id="compiled-css" type="text/css">

body {/*  w  w  w  .j av  a  2  s  .c  o m*/
   padding: 0px !important;
   margin: 8px;
}


      </style> 
      <script type="text/javascript">
$(function() {
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: "container",
      type: "column",
    },
    plotOptions: {
      series: {
        stacking: 'normal'
      }
    },
    series: [{
      data: [4, 14, 18, 5, 6, 5]
    }, {
      data: [4, 14, 18, 5, 6, 5]
    }, {
      data: [4, 14, 18, 5, 6, 5]
    }],
    xAxis: {
      categories: [{
        name: "Fruit",
        categories: ["Apple", "Banana"]
      }, {
        name: "Vegetable",
        categories: ["Carrot", "Potato"]
      }, {
        name: "Fish",
        categories: ["Cod", "Salmon"]
      }]
    }
  });
});

      </script> 
   </head> 
   <body> 
      <div id="container" class="chart-container"></div>  
   </body>
</html>

Related Tutorials