2016-gop-delegates

Highcharts' drilldown column chart. For WDET's 2016 Elections: Issues & Candidates series.

by mlmason

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Delegates Committed to the Republican Presidential Candidates'
        },
        subtitle: {
            text: "<b>1,237 needed for nomination of the 2,340 available.</b><br/>Click each column to view the candidate's count by month and by state."
        },
        colors: ['#ff5c5c', '#ea372e', '#c5251e', '#9a1f1b', '#701c1c'],
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                text: 'Total Delegates Won'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y}'
                }
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
        },
        /** Level 1: Total delegates won per candidate */
        series: [{
            name: 'Candidate',
            colorByPoint: true,
            data: [{
                name: 'Ben Carson',
                y: 7,
                drilldown: 'carson-months'
            }, {
                name: 'Ted Cruz',
                y: 546,
                drilldown: 'cruz-months'
            }, {
            	name: 'John Kasich',
            	y: 152,
            	drilldown: 'kasich-months'
            }, {
            	name: 'Marco Rubio',
            	y: 151,
            	drilldown: 'rubio-months'
            }, {
            	name: 'Donald Trump',
            	y: 954,
            	drilldown: 'trump-months'
            }]
        }],
        /** Drilldown two levels: first months, then states for each above candidate in the series */
        drilldown: {
...