Highcharts Configuration Preview
// Load the data from the HTML table and tag it with an upper case name used for joining
var data = [],
// Get the map data
mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);
Highcharts.data({
table: document.getElementById('data'),
startColumn: 1,
firstRowAsNames: false,
complete: function (options) {
options.series[0].data.forEach(function (p) {
data.push({
ucName: p[0],
value: p[1]
});
});
}
});
// Process mapdata
mapData.forEach(function (p) {
var path = p.path,
copy = {
path: path
};
// This point has a square legend to the right
if (path[0][1] === 9727) {
// Identify the box
Highcharts.seriesTypes.map.prototype.getBox.call({}, [copy]);
// Place the center of the data label in the center of the point legend box
p.middleX = ((path[0][1] + path[1][1]) / 2 - copy._minX) / (copy._maxX - copy._minX); // eslint-disable-line no-underscore-dangle
p.middleY = ((path[0][2] + path[2][2]) / 2 - copy._minY) / (copy._maxY - copy._minY); // eslint-disable-line no-underscore-dangle
}
// Tag it for joining
p.ucName = p.name.toUpperCase();
});
// Initiate the chart
Highcharts.mapChart('container', {
title: {
text: 'US unemployment rate in Dec. 2017'
},
subtitle: {
text: 'Small US map with data labels'
},
mapNavigation: {
enabled: true,
enableButtons: false
},
xAxis: {
labels: {
enabled: false
}
},
colorAxis: {
labels: {
format: '{value}%'
}
},
series: [{
mapData: mapData,
data: data,
joinBy: 'ucName',
name: 'Unemployment rate per 2015',
states: {
hover: {
color: '#a4edba'
}
},
dataLabels: {
enabled: true,
formatter: function () {
return this.point.properties['hc-a2'];
},
style: {
fontSize: '10px'
}
},
tooltip: {
valueSuffix: '%'
}
}, {
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small'], 'mapline'),
color: 'silver'
}]
});
1 | HAWAII | 2.0 |
2 | NEW HAMPSHIRE | 2.6 |
2 | NORTH DAKOTA | 2.6 |
4 | NEBRASKA | 2.7 |
5 | IOWA | 2.8 |
5 | VERMONT | 2.8 |
7 | IDAHO | 2.9 |
8 | MAINE | 3.0 |
8 | WISCONSIN | 3.0 |
10 | COLORADO | 3.1 |
10 | MINNESOTA | 3.1 |
10 | UTAH | 3.1 |
13 | TENNESSEE | 3.2 |
14 | INDIANA | 3.4 |
14 | KANSAS | 3.4 |
16 | ALABAMA | 3.5 |
16 | MASSACHUSETTS | 3.5 |
16 | MISSOURI | 3.5 |
16 | SOUTH DAKOTA | 3.5 |
20 | ARKANSAS | 3.7 |
20 | FLORIDA | 3.7 |
20 | VIRGINIA | 3.7 |
23 | TEXAS | 3.9 |
24 | MARYLAND | 4.0 |
25 | MONTANA | 4.1 |
25 | OKLAHOMA | 4.1 |
25 | OREGON | 4.1 |
25 | SOUTH CAROLINA | 4.1 |
29 | WYOMING | 4.2 |
30 | CALIFORNIA | 4.3 |
31 | GEORGIA | 4.4 |
31 | KENTUCKY | 4.4 |
31 | RHODE ISLAND | 4.4 |
34 | ARIZONA | 4.5 |
34 | NORTH CAROLINA | 4.5 |
34 | WASHINGTON | 4.5 |
37 | CONNECTICUT | 4.6 |
37 | DELAWARE | 4.6 |
37 | LOUISIANA | 4.6 |
37 | MISSISSIPPI | 4.6 |
37 | NEW YORK | 4.6 |
42 | MICHIGAN | 4.7 |
42 | OHIO | 4.7 |
42 | PENNSYLVANIA | 4.7 |
45 | ILLINOIS | 4.8 |
46 | NEVADA | 5.0 |
46 | NEW JERSEY | 5.0 |
48 | WEST VIRGINIA | 5.5 |
49 | DISTRICT OF COLUMBIA | 6.0 |
49 | NEW MEXICO | 6.0 |
51 | ALASKA | 7.3 |