2016-dem-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 Democratic Presidential Candidates'
	    },
	    subtitle: {
	        text: "<b>2,383 needed for nomination of the 4,189 available.</b><br/>Click each column to view the candidate's count by month and by state."
	    },
	    colors: ['#1d239d','#0f2445'],
	    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: 'Hillary Clinton',
	            y: 756,
	            drilldown: 'clinton-months'
	        }, {
	            name: 'Bernie Sanders',
	            y: 544,
	            drilldown: 'sanders-months'
	        }]
	    }],
	    /** Drilldown two levels: first months, then states for each above candidate in the series */
	    drilldown: {
	        series: [{
	            name: 'Hillary Clinton',
	            id: 'clinton-months',
	            data: [{
	            	name: 'February',
	            	y: 91,
	            	drilldown: 'clinton-feb'
	            }, {
	            	name: 'Super Tuesday',
	            	y: 513,
	            	drilldown: 'clinton-tues'
	            }, {
	            	name: 'March',
	            	y: 152,
	            	drilldown: 'clinton-mar'
	            }]
	        }, {
	        	name: 'Bernie Sanders',
	       ...