Advertiser dashboard: Top categories

by Angelos Chaidas

HTML

<script src="https://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: [
                'IT-Jobs',
                'Accounting',
                'Catering',
                'Marketing',
                'Manufacturing',
                'Graduate',
                'Nursing &<br/>Healthcare'                        
            ],
            title: {
                text: null
            },
            labels: {
                style: {
                    fontSize: '12px',
                    lineHeight: '14px',
                    fontFamily: 'Arial',
                    color: '#313131'
                },
                rotation : -45,
                x : 10,
                align : 'right'
            }
        },
        yAxis: [
            {
                min: 0,
                title: {
                    text: '% of all jobs',
                },
                labels: {
                    style: {
                        fontSize: '12px',
                        lineHeight: '14px',
                        fontFamily: 'Arial'
                    },
                    format : '{value}%'
                },
                gridLineDashStyle: 'Dot'
            },
            {
                min: 0,
                title : {
                    text : 'Average salary',
                },
                labels : {
                    style : {
                        fontSize:'12px',
                        lineHeight:'14px',
                        fontFamily : 'Arial'
                    }
                },
                opposite : true
            }               
        ],
        tooltip: {
            valueSuffix: '%'
        },
        plotOptions: {
            column: {
                dataLabels: {
                    enabled: false,
                    format: '{point.y}%',
                    style: {
             ...