Chapter 4: Extending to Stacked Mirror Chart

Extend mirror chart to a stacked mirror chart. UK & Germany are grouped into the left hand side, S.Korea and Japan grouped to the right hand side. Data labels for the total of the group are displayed at the end of each bar.

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<body>
<div style="margin: 5px 60px 5px 5px; " id='container'></div>
</body>

JavaScript

$(document).ready(function() {
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column',
                borderWidth: 1
            },
            title: {
                text: 'Number of Patents Granted',
            },
            credits: { 
               position: {
                  align: 'left',
                  x: 20
               },
               href: 'http://www.uspto.gov',
               text: 'Source: U.S. Patent & Trademark Office'
            },
            xAxis: [{
                categories: [ 
                              '2001', '2002', '2003', '2004', '2005', 
                              '2006', '2007', '2008', '2009', '2010', '2011' ],
            }, {
                categories: [ 
                              '2001', '2002', '2003', '2004', '2005', 
                              '2006', '2007', '2008', '2009', '2010', '2011' ],
                opposite: true,
                linkedTo: 0
            }],
            yAxis: {
                title: {
                    text: 'No. of Patents'
                },
                labels: {
                    formatter: function() {
                       return Highcharts.numberFormat(Math.abs(this.value), 0);
                    }
                }
            },
            plotOptions: {
                bar: {
                    stacking: 'normal'
                }
            },
            series: [{
                name: 'UK',
                data: [ 4351, 4190, 4028, 3895, 3553, 
                        4323, 4029, 3834, 4009, 5038, 4924 ],
                dataLabels : {
                    enabled: true,
                    backgroundColor: '#FFFFFF',
                    x: 40,
                    formatter: function() {
                        return Highcharts.numberFormat(Math.abs(this.total), 0);
                    },
                    style: {
                        fontWeight: 'bold'
       ...