Electable Users

by Adam Nekola

HTML

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

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

JavaScript

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Projected number of Candidates'
        },
        subtitle: {
            text: '',
            enabled: false
        },
        tooltip: {
            headerFormat: '',
            shared: true  
        },
        credits: { enabled:false },
        xAxis: {
            categories: ["Spring '15", "Fall '15", "Spring '16", "Fall '16", "Spring '17", "Fall '17"]
        },
        yAxis: {
            max:85000,
            min: 0,
            endOnTick: false,
            title: {
                text: ''
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        legend: {
            layout: 'horizontal',
            align: 'center',
            borderWidth: 0
        },
        series: [{
            name: 'Total Candidates',
            data: [1350,4680,12780,25920,48150, {
                dataLabels: {
                    enabled: true,
                    align: 'left',
                    style: {
                        fontWeight: 'bold'
                    },
                    x: -20,
                    y: -15,
                    verticalAlign: 'middle',
                    overflow: true,
                    crop: false
                },
                y: 81000
            }]
        }, {
            name: 'Active Candidates',
            data: [1350,3600,9900,18000,33750, {
                dataLabels: {
                    enabled: true,
                    align: 'left',
                    style: {
                        fontWeight: 'bold'
                    },
                    x: -20,
                    y: 18,
                    verticalAlign: 'middle',
                    overflow: true,
                    crop: false
                },
                y: 54000
            }]
        }]
    });
});