Chapter 4: Introducing Bar Charts (3)

Top 10 countries with patents granted in bar chart. Horizontal x-axis label, data label inside bars. No axis, add background image

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',
                spacingLeft: 20,
                plotBackgroundImage: 'http://joekuan.org/images/chartBg.png',
                inverted: true
            },
            title: {
                text:  null 
            },
            credits: { 
               position: {
                  align: 'left',
                  x: 20
               },
               text: 'Source: U.S. Patent & Trademark Office'
            },
            xAxis: {
                categories: [ 'United States', 'Japan', 'South Korea', 'Germany', 'Taiwan', 
                              'Canada', 'France', 'United Kingdom', 'China', 'Italy' ],
                lineWidth: 0,
                tickLength: 0,
                labels: {
                    align: 'left',
                    x: 0,
                    y: -13,
                    style: {
                        fontWeight: 'bold'
                    }
                }
            },
            yAxis: {
                title: {
                    text: null
                },
                labels: {
                    enabled: false
                },
                gridLineWidth: 0,
                type: 'logarithmic'
            },
            plotOptions: {
                column: {
                    colorByPoint: false,
                    dataLabels: {
                        enabled: true,
                        color: '#F4F4F4',
                        x: -50,
                        y: 0,
                        formatter: function() {
                            return Highcharts.numberFormat(this.y, 0);
                        },
                        style: {
                            fontWeight: 'bold'
                        }
                    }
                }
            },
            series: [{
                showInLegend: false,
  ...