Chapter 4: Comparing the Columns in Stacked Percentage

5 series column charts - UK, Germany, S.Korea, Japan and US stack in percentage

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: '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' ],
                lineWidth: 0,
                minorGridLineWidth: 0,
            },
            yAxis: {
                title: {
                    text: 'Percentage'
                }
            },
            plotOptions: {
                column: {
                    stacking: 'percent'
                }
            },
            series: [{
                name: 'UK',
                data: [ 4351, 4190, 4028, 3895, 3553, 
                        4323, 4029, 3834, 4009, 5038, 4924 ]
            }, {
                name: 'Germany',
                data: [ 11894, 11957, 12140, 11367, 9575, 
                        10889, 10012, 10085, 10352, 13633, 12968 ]
            }, {
                name: 'S.Korea',
                data: [ 3763, 4009, 4132, 4671, 4591, 
                        6509, 7264, 8730, 9566, 12508, 13239 ]
            }, {
                name: 'Japan',
                data: [ 34890, 36339, 37248, 37032, 31834, 
                        39411, 35941, 36679, 38066, 46977, 48256 ]
            }, {
                name: 'US',
                data: [ 98655, 97125, 98590, 94128, 82586,
                        102267, 93690, 92001, 95038, 121179, 121261 ]
            }]
        });
    });