$(function() { var all_chart_options = { "chart": { "renderTo": "chart2", "margin": [140, 40, 80, 220], "borderWidth": 0, "plotBorderColor": "#000", "plotBorderWidth": 0, "type": "bar", "events": { "redraw": function redraw() { if (chart) { $.each(chart.series, function(i, serie) { $.each(serie.data, function(j, point) { if (point.options.cursor === "pointer") { point.graphic.attr({ cursor: 'pointer' }); } }); }); } } }, "zoomType": null, "alignTicks": false, "ignoreHiddenSeries": true, "inverted": false }, "colors": ["#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1", "#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"], "legend": { "align": "left", "backgroundColor": "none", "borderColor": "none", "borderWidth": 0, "enabled": true, "floating": true, "itemDistance": -5, "itemWidth": 350, "layout": "vertical", "reversed": true, "shadow": false, "useHTML": false, "verticalAlign": "top", "width": 610, "x": 0, "y": 30, "itemStyle": { "fontFamily": "Calibri, Arial, Helvetica, sans-serif", "color": "#000", "cursor": "pointer" }, "itemHiddenStyle": { "color": "gray" }, "itemHoverStyle": { "cursor": "pointer" } }, "plotOptions": { "series": { "events": { "legendItemClick": function legendItemClick(event) {} }, "dataLabels": { "enabled": false, "allowOverlap": false, "padding": 0, "verticalAlign": "bottom", "style": { "textShadow": "none", "color": "#000" }, "formatter": function() { return $(this.y).addCommas(); } }, "pointPlacement": null, "stacking": null, "pointPadding": 0.1, "groupPadding": 0.1, "minPointLength": 2, "minSize": 4, "sizeBy": "width", "lineWidth": 1.5, "states": { "hover": { "lineWidth": 4 } }, "marker": { "enabled": false, "states": { "hover": { "enabled": true, "radius": 5 } } } }, "bubble": { "tooltip": { "followPointer": true } }, "boxplot": { "fillColor": "#F0F0E0" } }, "series": [{ "name": "Master's, professional, or doctorate degree", "data": [10.8, 7.3, 5.4, 19.4, 8.7, 18.4, 33.3], "type": "bar", "color": "#f15c80", "_symbolIndex": 5, "stacking": "stacked", "visible": true }, { "name": "Bachelor's degree", "data": [18.4, 16.2, 20, 15.6, 27.4, 25.4, 35.9], "type": "bar", "color": "#8085e9", "_symbolIndex": 4, "stacking": "stacked", "visible": true }, { "name": "Associate's degree in college", "data": [11.4, 10.1, 12.7, 8.4, 10.6, 11.3, 4.9], "type": "bar", "color": "#f7a35c", "_symbolIndex": 3, "stacking": "stacked", "visible": true }, { "name": "Some college, but no degree", "data": [25, 23.7, 29.2, 32.3, 33.7, 21, 12.5], "type": "bar", "color": "#90ed7d", "_symbolIndex": 2, "stacking": "stacked", "visible": true } , { "name": "High school graduate - high school diploma or equivalent (GED)", "data": [24.5, 24.3, 23.9, 19.4, 16.9, 19.2, 9.1], "type": "bar", "color": "#434348", "_symbolIndex": 1, "stacking": "stacked", "visible": true }, { "name": "Less than high school", "data": [10, 18.3, 8.9, 4.9, 2.7, 4.7, 4.4], "type": "bar", "color": "#7cb5ec", "_symbolIndex": 0, "stacking": "stacked", "visible": true } ], "subtitle": { "text": "", "align": "left", "style": { "color": "#000000", "fontFamily": "arial", "fontWeight": "normal", "fontSize": "12px" } }, "title": { "text": "Educational attainment of U.S. households by race and ethnicity, 2014\u201316 combined", "align": "left", "style": { "color": "#000000", "fontFamily": "arial", "fontWeight": "bold", "fontSize": "14px" } }, "tooltip": { "backgroundColor": "#FEFFEF", "crosshairs": [false, false], "formatter": function() { var options = this.series.chart.tooltip.options; var dollar = options.y_signs_arr[0]; var percent = options.y_signs_arr[1]; var decimals = options.y_decimals; var multiple = options.multiplier; if (all_chart_options.series[this.series.index].yAxis == 1) { dollar = options.y_signs_arr_2[0]; percent = options.y_signs_arr_2[1]; decimals = options.y_decimals_2; multiple = options.multiplier_2; } var y_val = this.point.high ? "High: " + dollar + $(this.point.high * multiple).addCommas(decimals) + percent + " | Low: " + dollar + $(this.point.low * multiple).addCommas(decimals) + percent : dollar + $(this.y * multiple).addCommas(decimals) + percent; var s = "" + this.series.name + "
" + this.x + ": " + y_val; all_chart_options.series[this.series.index] ? s = all_chart_options.tooltip.addExtraData(all_chart_options.series[this.series.index].extra_data, this.point, s) : s = s; return s.replace(/\$-/g, "-$"); }, "style": { "color": "#000000", "fontFamily": "Calibri, Arial, Helvetica, sans-serif" }, "useHTML": false, "shared": false, "addExtraData": function(extra_data, point, s) { if (extra_data && extra_data[0].name) { $.each(extra_data, function(i) { if (extra_data[i].values[point.index]) { s = s + "
" + extra_data[i].name + ": " + extra_data[i].values[point.index]; } }); } return s; }, "x_signs_arr": ["", ""], "z_signs_arr": ["", ""], "y_decimals": 1, "y_decimals_2": 0, "x_decimals": 0, "z_decimals": 0, "z_title": "Z", "multiplier": 1, "multiplier_2": 1, "y_signs_arr": ["", "%"], "y_signs_arr_2": ["", ""] }, "xAxis": { "categories": ["Black or African American", "Hispanic or Latino", "American Indian or Alaska Native", "Multi-race", "Native Hawaiian or Other Pacific Islander", "White", "Asian"], "gridLineColor": "#c0c0c0", "gridLineWidth": 0, "gridLineDashStyle": "Dot", "labels": { "rotation": 0, "useHTML": false, "style": { "color": "#000000", "fontFamily": "Calibri, Arial, Helvetica, sans-serif", "fontWeight": "normal", "backgroundColor": "#fff", "fontSize": "12px", "textOverflow": "none" } }, "lineWidth": 1.2, "lineColor": "gray", "max": null, "min": null, "plotBands": [], "plotLines": [{ "value": 0, "color": "#c0c0c0", "dashStyle": "solid", "width": 0 }], "startOnTick": false, "tickInterval": 1, "tickmarkPlacement": "on", "tickPosition": "outside", "tickColor": "#C0D0E0", "title": { "align": "high", "useHTML": true, "text": "", "margin": 6, "rotation": 0, "style": { "color": "#000000", "fontFamily": "Calibri, Arial, Helvetica, sans-serif", "fontWeight": "normal", "backgroundColor": "#fff", "fontSize": "13px" }, "x": 40, "y": -20 }, "type": "linear" }, "yAxis": { "gridLineColor": "#c0c0c0", "gridLineWidth": 1, "gridLineDashStyle": "Dot", "labels": { "formatter": function yAxisFormat() { var decimals = this.axis.options.labels.decimals; var signs_arr = this.axis.options.labels.signs_arr; var dividend = this.axis.options.labels.dividend; var s = this.value / dividend == parseInt(this.value / dividend) ? Highcharts.numberFormat(this.value / dividend, 0, ".", ",") : Highcharts.numberFormat(this.value / dividend, 1, ".", ","); s = signs_arr[0] + s + signs_arr[1]; return s.replace(/\$-/g, "-$"); }, "rotation": 0, "style": { "color": "#000000", "fontFamily": "Calibri, Arial, Helvetica, sans-serif", "fontWeight": "normal", "backgroundColor": "#fff", "fontSize": "12px" }, "signs_arr": ["", "%"], "decimals": null, "dividend": 1 }, "lineColor": "gray", "lineWidth": 1, "max": 100, "min": null, "opposite": false, "plotBands": [], "plotLines": [{ "value": 0, "color": "#c0c0c0", "dashStyle": "solid", "width": 1 }], "tickInterval": null, "tickmarkPlacement": "on", "tickPosition": "outside", "tickColor": "#C0D0E0", "tickWidth": 1, "title": { "useHTML": false, "text": "", "margin": 6, "align": "middle", "offset": 20, "rotation": 0, "x": 0, "y": 8, "style": { "color": "#000000", "fontFamily": "Calibri, Arial, Helvetica, sans-serif", "fontWeight": "normal", "fontSize": "13px" } }, "type": "linear" }, "credits": { "href": "/", "position": { "align": "left", "x": 10, "y": -22 }, "style": { "cursor": "default", "color": "#2C2C2C" }, "target": "_blank", "text": "Click legend items to change data display. Hover over chart to view data.
Source: U.S. Bureau of Labor Statistics.", "useHTML": true }, "exporting": { "sourceWidth": 640, "scale": 1, "buttons": { "contextButton": { "enabled": true, "verticalAlign": "bottom", "x": -10, "symbol": "url(https://www.bls.gov/images/icons/download-icon.png)" } } }, "saved_values": [{ "id": "chart_type_icons", "val": "stacked_bar" }, { "id": "chart_id_textinput", "val": "chart2" }, { "id": "map_type_select", "val": "state" }, { "id": "map_animated_checkbox", "val": false }, { "id": "map_color_by_names_checkbox", "val": false }, { "id": "bubble_animated_checkbox", "val": false }, { "id": "drilldown_type_select", "val": "bar" }, { "id": "chart_width_textinput", "val": "580" }, { "id": "chart_height_textinput", "val": "430" }, { "id": "top_margin_textinput", "val": "100" }, { "id": "right_margin_textinput", "val": "40" }, { "id": "bottom_margin_textinput", "val": "80" }, { "id": "left_margin_textinput", "val": "160" }, { "id": "map_spotlight_size_checkbox", "val": false }, { "id": "map_circle_size_range", "val": "10" }, { "id": "map_circle_size_by_select", "val": "main_values" }, { "id": "table_input_load_series_from_icons", "val": "row_heads" }, { "id": "example_table_select", "val": "" }, { "id": "table_input_textarea", "val": "
Educational attainment of U.S. households by race and ethnicity, 2014\u20132016 combined
Educational attainmentBlack or African AmericanHispanic or LatinoIndian or Alaska NativeMulti-raceHawaiian or Other PacificWhiteAsian

Less than high school

10.018.38.94.92.74.74.4

High school graduate - high school diploma or equivalent (GED)

24.524.323.919.416.919.29.1

Some college, but no degree

25.023.729.232.333.72112.5

Associate's degree in college

11.410.112.78.410.611.34.9

Bachelor's degree

18.416.22015.627.425.435.9

Master's, professional, or doctorate degree

10.87.35.419.48.718.433.3
" }, { "id": "color_palettes", "val": -1 }, { "id": "series_color_0", "val": "7CB5EC" }, { "id": "line_style_select_0", "val": "Solid" }, { "id": "use_2nd_y_axis_checkbox_0", "val": false }, { "id": "series_visible_checkbox_0", "val": true }, { "id": "series_extra_data_title_textarea_0", "val": "" }, { "id": "series_extra_data_values_textarea_0", "val": "" }, { "id": "series_color_1", "val": "434348" }, { "id": "line_style_select_1", "val": "Solid" }, { "id": "use_2nd_y_axis_checkbox_1", "val": false }, { "id": "series_visible_checkbox_1", "val": true }, { "id": "series_extra_data_title_textarea_1", "val": "" }, { "id": "series_extra_data_values_textarea_1", "val": "" }, { "id": "series_color_2", "val": "90ED7D" }, { "id": "line_style_select_2", "val": "Solid" }, { "id": "use_2nd_y_axis_checkbox_2", "val": false }, { "id": "series_visible_checkbox_2", "val": true }, { "id": "series_extra_data_title_textarea_2", "val": "" }, { "id": "series_extra_data_values_textarea_2", "val": "" }, { "id": "series_color_3", "val": "F7A35C" }, { "id": "line_style_select_3", "val": "Solid" }, { "id": "use_2nd_y_axis_checkbox_3", "val": false }, { "id": "series_visible_checkbox_3", "val": true }, { "id": "series_extra_data_title_textarea_3", "val": "" }, { "id": "series_extra_data_values_textarea_3", "val": "" }, { "id": "series_color_4", "val": "8085E9" }, { "id": "line_style_select_4", "val": "Solid" }, { "id": "use_2nd_y_axis_checkbox_4", "val": false }, { "id": "series_visible_checkbox_4", "val": true }, { "id": "series_extra_data_title_textarea_4", "val": "" }, { "id": "series_extra_data_values_textarea_4", "val": "" }, { "id": "series_color_5", "val": "F15C80" }, { "id": "line_style_select_5", "val": "Solid" }, { "id": "use_2nd_y_axis_checkbox_5", "val": false }, { "id": "series_visible_checkbox_5", "val": true }, { "id": "series_extra_data_title_textarea_5", "val": "" }, { "id": "series_extra_data_values_textarea_5", "val": "" }, { "id": "legend_layout_select", "val": "horizontal" }, { "id": "map_legend_enabled_checkbox", "val": true }, { "id": "map_legend_decimals_select", "val": null }, { "id": "legend_placement_x", "val": "5" }, { "id": "legend_placement_y", "val": "30" }, { "id": "legend_reverse_layout_checkbox", "val": false }, { "id": "legend_alphabetical_layout_checkbox", "val": false }, { "id": "legend_width_input", "val": "580" }, { "id": "legend_item_width_input", "val": "220" }, { "id": "legend_make_toggle_checkbox", "val": false }, { "id": "chart_x_axis_title_textarea", "val": "" }, { "id": "chart_x_axis_x_position_input", "val": "40" }, { "id": "chart_x_axis_tickmark_interval_input", "val": "" }, { "id": "chart_x_axis_min_input", "val": "" }, { "id": "chart_x_axis_max_input", "val": "" }, { "id": "chart_x_axis_show_only_years", "val": false }, { "id": "chart_x_axis_add_commas", "val": false }, { "id": "chart_x_axis_signs_select", "val": "no_signs" }, { "id": "chart_x_axis_decimals_select", "val": null }, { "id": "chart_y_axis_title_textarea", "val": "" }, { "id": "chart_y_axis_x_position_input", "val": "35" }, { "id": "chart_y_axis_tickmark_interval_input", "val": "" }, { "id": "chart_y_axis_min_input", "val": "" }, { "id": "chart_y_axis_max_input", "val": "100" }, { "id": "chart_y_axis_opposite_checkbox", "val": false }, { "id": "chart_y_axis_log_checkbox", "val": false }, { "id": "chart_y_axis_signs_select", "val": "%" }, { "id": "chart_y_axis_decimals_select", "val": null }, { "id": "chart_y_axis_divide_select", "val": "1" }, { "id": "chart_y_axis_2_enabled_checkbox", "val": false }, { "id": "chart_y_axis_title_textarea_2", "val": "" }, { "id": "chart_y_axis_x_position_input_2", "val": "-75" }, { "id": "chart_y_axis_tickmark_interval_input_2", "val": "5" }, { "id": "chart_y_axis_min_input_2", "val": "0" }, { "id": "chart_y_axis_max_input_2", "val": "100" }, { "id": "chart_y_axis_signs_select_2", "val": "no_signs" }, { "id": "chart_y_axis_decimals_select_2", "val": null }, { "id": "chart_tooltip_shared_checkbox", "val": false }, { "id": "chart_tooltip_force_decimals_select", "val": "1" }, { "id": "chart_tooltip_signs_select", "val": "%" }, { "id": "chart_tooltip_force_decimals_x_select", "val": "0" }, { "id": "chart_tooltip_signs_x_select", "val": "no_signs" }, { "id": "chart_tooltip_force_decimals_z_select", "val": "0" }, { "id": "chart_tooltip_signs_z_select", "val": "no_signs" }, { "id": "map_tooltip_main_value_font_size_input", "val": "30" }, { "id": "map_tooltip_na_text_input", "val": "N/A" }, { "id": "map_tooltip_prepend_to_value_text_input", "val": "" }, { "id": "chart_z_title_text_input", "val": "" }, { "id": "chart_tooltip_y_multiple_select", "val": "1" }, { "id": "chart_tooltip_force_decimals_select_2", "val": "0" }, { "id": "chart_tooltip_signs_select_2", "val": "no_signs" }, { "id": "chart_tooltip_y_multiple_select_2", "val": "1" }, { "id": "chart_credits_text_textarea", "val": "Click legend items to change data display. Hover over chart to view data.\nSource: U.S. Bureau of Labor Statistics." }, { "id": "point_padding_input", "val": ".1" }, { "id": "group_padding_input", "val": ".2" }, { "id": "chart_subtitle_textarea", "val": "" }, { "id": "map_animation_speed_range", "val": "500" }, { "id": "map_include_puerto_rico_checkbox", "val": false }, { "id": "map_include_virgin_islands_checkbox", "val": false }, { "id": "chart_zoom_select", "val": "false,false,null" }, { "id": "chart_show_data_labels_checkbox", "val": false }, { "id": "chart_add_recession_shading_select", "val": "no_recession" }] }; var chartCallback = function chartCallback(all_chart_options) { if (all_chart_options.timeline) { //call animation if applicable all_chart_options.timeline.animation(); } $(".highcharts-legend-item").css("min-height", "0px").css("z-index", 100); //fix so CMS CSS doesn't make legend taller than it should $(".highcharts-tooltip").css("z-index", 200); /** * Highcharts plugin for setting a lower opacity for other series than the one that is hovered * in the legend */ (function(Highcharts) { var each = Highcharts.each; Highcharts.wrap(Highcharts.Legend.prototype, 'renderItem', function(proceed, item) { proceed.call(this, item); var isPoint = !!item.series, collection = isPoint ? item.series.points : this.chart.series, groups = isPoint ? ['graphic'] : ['group', 'markerGroup'], element = (this.options.useHTML ? item.legendItem : item.legendGroup).element; element.onmouseover = function() { each(collection, function(seriesItem) { if (seriesItem !== item) { each(groups, function(group) { seriesItem[group].animate({ opacity: 0.25 }, { duration: 150 }); }); } }); }; element.onmouseout = function() { each(collection, function(seriesItem) { if (seriesItem !== item) { each(groups, function(group) { seriesItem[group].animate({ opacity: 1 }, { duration: 50 }); }); } }); }; }); Highcharts.wrap(Highcharts.Chart.prototype, 'showCredits', function(proceed, credits) { proceed.call(this, credits); if (this.credits && credits.target) { this.credits.on('click', function() { $('').attr({ href: credits.href, target: credits.target })[0].click(); }); } }); })(Highcharts); //end gray other series plugin }; Highcharts.setOptions({ lang: { thousandsSep: ",", drillUpText: "? Back ", contextButtonTitle: "Download chart image" } }); var chart = new Highcharts.Chart(all_chart_options, chartCallback(all_chart_options)); }); jQuery.fn.extend({ addCommas: function addCommas(decimals) { var val = this[0] || 0; if (isNaN(val) || val < 999 && val > -999 && decimals < 1) { //small numbers auto decimals return val; } else if (val < 999 && val > -999 && decimals > 0) { //small numbers fixed decimals return val.toFixed(decimals); } else if ((val > 999 || val < -999) && decimals > 0) { //big numbers fixed decimals while (/(\d+)(\d{3})/.test(val.toString())) { val = val.toFixed(decimals).replace(/(\d+)(\d{3})/, '$1' + ',' + '$2'); } } else if (val > 999 || val < -999) { //big number auto decimals while (/(\d+)(\d{3})/.test(val.toString())) { val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2'); } } return val; } });