Annual Report: Median household income by race

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/economy-matters/annual-report/2018/highcharts-global-settings_2018-annual-report_min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet"> 

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

<div class="economyMattersChart" id="container_MedianHouseholdIncomeByRace"></div>

CSS

.economyMattersChart { height: 400px; width: 100%; margin: 0 auto; }

JavaScript

$(document).ready(function(){ 

	var iframeWidth_MedianHouseholdIncomeByRace = $('.economyMattersChart').width();
	var iframeHeight_MedianHouseholdIncomeByRace = $('.economyMattersChart').height();

	var sourceLine_MedianHouseholdIncomeByRace = 'Source: U.S. Census Bureau, 2013-2017 American Community Survey 5-Year Estimates';
	setChartDefaults(iframeWidth_MedianHouseholdIncomeByRace,iframeHeight_MedianHouseholdIncomeByRace,sourceLine_MedianHouseholdIncomeByRace,50);
	var chartOptions_MedianHouseholdIncomeByRace = {
	  chart: { marginBottom: 100, marginRight: 20, renderTo: 'container_MedianHouseholdIncomeByRace', type: 'column' },
	  exporting: {
		chartOptions: {
		  legend: { enabled: true }
		},
		filename: 'atlanta-fed_economy-matters_color-of-money-median-household-income-by-race'
	  },
		legend: { floating: false, x: -15, itemWidth: iframeWidth_MedianHouseholdIncomeByRace * 0.25, width: iframeWidth_MedianHouseholdIncomeByRace * 0.75 },
	  subtitle: { text: '' },
	  title: { text: 'Color of Money: Median household income by race', width: iframeWidth_MedianHouseholdIncomeByRace * 0.8 },
	  tooltip: {
		formatter: function () {
		  var s = '<span style="font-size: 14px;">' + this.x + '</span>';
		  $.each(this.points, function (i, point) {
			s += '<br /><span style="color: ' + point.series.color + ';">' + point.series.name + '</span>: $' + Highcharts.numberFormat(point.y, 0);
		  });
		  return s;
		},
		shared: true
	  },
	  xAxis: {
		  categories: ['Alabama','Florida','Georgia','Louisiana','Mississippi','Tennessee'], 
		  labels: { y: 20 }
	  },
	  yAxis: { 
		plotLines:[{ value: 0, color: '#666', width: 2, zIndex: 3 }],
		title: { text: 'Dollars' }, tickInterval: 10000
	  },
	  series: [
		{ name: 'White alone', data: [53012,53357,60671,57109,52159,51801] },
		{ name: 'Black alone', data: [31183,37280,40112,28743,28347,35571] },
		{ name: 'Asian', data: [61859,66236,73101,58158,55647,69802] },
		{ name: 'Latino or Hispanic', data:...