multi stacked bar with shared legend items for column chart - Javascript highcharts

Javascript examples for highcharts:Chart Legend

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

Description

multi stacked bar with shared legend items for column 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-compat-git.js"></script> 
      <script type="text/javascript">
    $(window).on('load', function() {
$(function () {// www  .j  a va2  s.c  om
    var colors = Highcharts.getOptions().colors;
    $('#container').highcharts({
        "title": {
            "text": ""
        },
            "plotOptions": {
            "series": {
                "dataLabels": {
                    "enabled": true
                },
                    "marker": {
                    "enabled": true
                },
                    "stacking": "normal"
            }
        },
            "series": [{
            id: '2005',
            color: colors[0],
                "data": [168, 168],
                "name": "2005",
                "stack": "Count Actual",
                "type": "column"
        }, {
            id: '2006',
            color: colors[1],
                "data": [168, 168],
                "name": "2006",
                "stack": "Count Actual",
                "type": "column"
        }, {
            linkedTo: '2005',
            color: colors[0],
                "data": [275.54, 194.846],
                "name": "2005",
                "stack": "Value Actual",
                "type": "column"
        }, {
            linkedTo: '2006',
            color: colors[1],
                "data": [230.155, 162.752],
                "name": "2006",
                "stack": "Value Actual",
                "type": "column"
        }],
            "xAxis": [{
            "allowDecimals": false,
                "labels": {
                "style": {
                    "fontSize": "13px"
                }
            },
                "categories": ["Category 1", "Category 2"],
                "type": "category"
        }],
            "yAxis": [{
            "title": {
                "text": "#"
            },
                "opposite": false,
                "type": "linear",
                "lineWidth": 1,
                "minPadding": 0
        }, {
            "title": {
                "text": "@ (x100)"
            },
                "opposite": true,
                "type": "linear",
                "lineWidth": 1,
                "minPadding": 0
        }]
    });
});
    });

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

Related Tutorials