Highcharts - Custom Bar Chart

by zumwalt

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
    $('#container').highcharts({
        chart: {
            type: 'bar',
            style: {
                fontFamily: '"Open Sans", Helvetica, sans-serif', // default font
                fontSize: '1em'
            }
        },
        colors: [
            '#1abc9c',
            '#2980b9',
            '#2ecc71',
            '#3498db',
            '#9b59b6',
            '#34495e',
            '#F1C40F',
            '#e67e22',
            '#e74c3c',
            '#95a5a6'
        ],
        title: {
            text: null,
            verticalAlign: 'bottom',
            margin: 35,
            style: {
                color: '#888',
                fontFamily: 'Open Sans'
            }
        },
        subtitle: {
            text: null,
            verticalAlign: 'bottom',
            style: {
                color: '#bbb',
                fontFamily: 'Open Sans'
            }
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        xAxis: {
            gridLineWidth: 0,
            lineWidth: 0,
            offset: 30,
            tickLength: 0,
            tickWidth: 0,
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun'
            ],
            labels: {
                style: {
                    color: '#AAA',
                    fontFamily: 'Open Sans',
                    fontSize: '1em',
                    margin: '5px'
                }
            }
        },
        yAxis: {
            labels: {
                enabled: false
            },
            min: 0,
            gridLineWidth: 0,
            title: {
                text: null
            }
        },
        tooltip: {
            headerFormat: '<div style="font-size:10px">{point.key}</div>',
            pointFormat: '<div><span style="display: inline-block;...