Advertiser dashboard: Salary distribution

by Angelos Chaidas

HTML

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

CSS

#container {
    width:420px;
    height:240px;
    margin:0 auto;
    border:1px solid #EFEFEF;
}

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: ['10-20K', '20-30K', '30-40K', '40-50K', '50-60K', '60-70K', '70K+'],
            title: {
                text: null
            },
            labels: {
                style: {
                    fontSize: '12px',
                    lineHeight: '14px',
                    fontFamily: 'Arial',
                    color: '#313131'
                },
                rotation : -60,
                x : 10,
                align : 'right'
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '',
            },
            labels: {
                style: {
                    fontSize: '12px',
                    lineHeight: '14px',
                    fontFamily: 'Arial'
                },
                format : '{value}%'
            },
            gridLineDashStyle: 'Dot'
        },
        tooltip: {
            valueSuffix: '%'
        },
        plotOptions: {
            column: {
                dataLabels: {
                    enabled: false,
                    format: '{point.y}%',
                    style: {
                        fontSize: '12px',
                        lineHeight: '14px',
                        fontFamily: 'Arial'
                    }
                },
                groupPadding : 0.1,
                pointPadding : 0
            }
        },
        credits: {
            enabled: false
        },
        legend : {
            verticalAlign : 'top',
            borderWidth : 0
        },
        series: [{
            name: 'Your jobs',
            data: [15, 40, 46, 52, 35, 10, 5],
            
        }, {
            name: 'National average',
            data: [10, 35, 38, 37, 26, 12, 1],
            color : '#999999'
        }]
    });
});