Rating Distribution

by Jim Howe

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        credits: {
            enabled: false
        },
        chart: {
            type: 'column',
            width: 300,
            height: 190,
            style: {
              fontSize: '11px',
              fontFamily: 'Calibri, Helvetica, Arial, sans-serif'
            }           
        },
        title: {
            text: 'Rating Distribution',
            style: {
              fontSize: '13px',
              color: '#042e6f'
            }
        },
        legend: {
            margin: -3,
            lineHeight: 11,
            itemDistance: 10,
            itemStyle: {
                fontSize: '11px'
            },
            symbolHeight: 8,
            symbolWidth: 8
        },
        xAxis: {
            categories: [
                'CCC',
                'B',
                'BB',
                'BBB',
                'A',
                'AA',
                'AAA'
            ],
            labels: {
                style: {
                    fontSize: '11px'
                },
                y: 11
            },
            lineColor: '#999',
            tickColor: '#999'
        },
        yAxis: {
            min: 0,
            title: null,
            tickInterval: 5,
            labels: { 
                formatter: function() { 
                    return this.value +'%' 
                },
                style: {
                    fontSize: '11px'
                }                
            },
            lineColor: '#999',
            tickColor: '#999'
        },
        plotOptions: {
            column: {
                pointPadding: -0.1,
                borderWidth: 0
            },
            series: {
                dataLabels: {
                    style: {
                        fontSize: '11px',
                        fontWeight: 'bold'
                    },
                    formatter: function() {
                        if (this.point.name ==...