CV Booster length chart

by Angelos Chaidas

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 656px; height: 320px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        credits : { 
            enabled : false
        },
        chart: {
            type: 'column',
            style : {
                fontFamily : 'Arial'
            }
        },
        title: {
            text: ''
        },
        xAxis: {
            title : {
                text : 'Number of words'
            },
            labels : {
                rotation : -45
            },
            categories: ["1 - 100","101 - 200","201 - 300","301 - 400","401 - 500","501 - 600","601 - 700","701 - 800","801 - 900","901 - 1000","1001 - 1100","1101 - 1200","1201 - 1300","1301 - 1400","1401 - 1500","1501 - 1600","1601 - 1700","1701 - 1800","1801 - 1900","1901 - 2000","2001 - 2100","2101 - 2200","2201 - 2300","2301 - 2400","2401 - 2500"],
            plotLines : [
                {
                    color : '#FF0000',
                    width: 2,
                    value : 24.5,
                    label : {
                        text : 'Your CV - 789 words',
                        style : {
                            color : '#FF0000',
                            fontWeight : 'bold'
                        },
                        rotation : 0
                    },
                    zIndex : 5
                }
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Percentage of all CVs in our database'
            },
            labels : {
                format : '{value}%'
            }
        },
        tooltip: {
            formatter : function() {
                return "<strong>" + this.y + "%</strong> of all CVs have a word count of <strong>" + this.x + " words</strong>";
            },
            useHTML: true
        },
        plotOptions: {
            column: {
                columnPadding : 0,
                borderWidth: 0
            },
            series : {
                dataLabels : {
                    enabled :...