chart for EM bank closures article

author: Mike Zavarello

by Mike Zavarello

HTML

<!-- Atlanta Fed scripts -->
<script src="https://www.frbatlanta.org/~/media/javascript/system/UniversalGoogleAnalytics.js"></script>
<script src="https://www.frbatlanta.org/~/media/javascript/highcharts/highcharts-global-settings-min.js"></script>

<!-- standard Highcharts scripts -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div class="WorkforceCurrentsChart" id="container_EconomicIndicatorComparisons"></div>

CSS

.WorkforceCurrentsChart { height: 450px; width: 100%; margin: 0 auto; }

JavaScript

$(document).ready(function(){

    var iframeWidth_WorkforceCurrentsChart = $('.WorkforceCurrentsChart').width();
    var iframeHeight_WorkforceCurrentsChart = $('.WorkforceCurrentsChart').height();

	/* chart 3: small business snapshot: firm size  */
	var sourceLine_EconomicIndicatorComparisons = 'Source: American Community Survey 5-Year Estimates, 2013-2017';
	setChartDefaults(iframeWidth_WorkforceCurrentsChart,iframeHeight_WorkforceCurrentsChart,sourceLine_EconomicIndicatorComparisons,50);
	var chartOptions_EconomicIndicatorComparisons = {
		chart: { marginBottom: 100, marginRight: 20, renderTo: 'container_EconomicIndicatorComparisons', type: 'column' },
		exporting: {
			chartOptions: {
				legend: { enabled: true }
			},
			filename: 'atlanta-fed_economy-matters_economic-indicator-comparisons-2013-to-2017'
		},
		legend: { floating: false, x: -15, itemWidth: iframeWidth_WorkforceCurrentsChart * 0.4, width: iframeWidth_WorkforceCurrentsChart * 0.4 },
		subtitle: { enabled: false },
		title: { text: 'Economic Indicator Comparisons, 2013-2017', width: iframeWidth_WorkforceCurrentsChart * 0.8 },
		plotOptions: {
			column: {
				borderWidth: 0, groupPadding: 0.1
			}
		},
    plotOptions: {
			series: { 
				dataLabels: {
					enabled: true, align: 'left', x: 0, y: 0,
					style: { fontFamily: 'Arial, sans-serif', fontSize: '16px', textOutline: 'none' },
					formatter: function() {
						return '<span style="color: ' + this.series.color + ';">' + Highcharts.numberFormat(this.y, 1) + '%</span>';
					}
				}
			}
    },
		tooltip: { enabled: false },
		xAxis: {
			categories: ['Unemployment Rate','Poverty Rate'], type: 'category', labels: { y: 20 }
		},
		yAxis: { 
			title: { text: '' }, tickInterval: 10, minorTickInterval: 5,
			labels: {
				formatter: function() {
					return Highcharts.numberFormat(this.value, 0) + '%';
				}
			}
		},		
		series: [
			{ name: 'Madison County, FL', data: [8.1,31.9] },
			{ name: 'Florida', data: [7.2,15.5] },
			{ name:...