Small US with data labels

author(s): Torstein Hønsi

by Anand Rathod

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>

<script src="https://code.highcharts.com/mapdata/countries/us/custom/us-small.js"></script>
<div id="container"></div>
<div id="table-div">
    <table id="data">
        <tr>
            <td>1</td>
            <td>HAWAII</td>
            <td>2.0</td>
        </tr>
        <tr>
            <td>2</td>
            <td>NEW HAMPSHIRE</td>
            <td>2.6</td>
        </tr>
        <tr>
            <td>2</td>
            <td>NORTH DAKOTA</td>
            <td>2.6</td>
        </tr>
        <tr>
            <td>4</td>
            <td>NEBRASKA</td>
            <td>2.7</td>
        </tr>
        <tr>
            <td>5</td>
            <td>IOWA</td>
            <td>2.8</td>
        </tr>
        <tr>
            <td>5</td>
            <td>VERMONT</td>
            <td>2.8</td>
        </tr>
        <tr>
            <td>7</td>
            <td>IDAHO</td>
            <td>2.9</td>
        </tr>
        <tr>
            <td>8</td>
            <td>MAINE</td>
            <td>3.0</td>
        </tr>
        <tr>
            <td>8</td>
            <td>WISCONSIN</td>
            <td>3.0</td>
        </tr>
        <tr>
            <td>10</td>
            <td>COLORADO</td>
            <td>3.1</td>
        </tr>
        <tr>
            <td>10</td>
            <td>MINNESOTA</td>
            <td>3.1</td>
        </tr>
        <tr>
            <td>10</td>
            <td>UTAH</td>
            <td>3.1</td>
        </tr>
        <tr>
            <td>13</td>
            <td>TENNESSEE</td>
            <td>3.2</td>
        </tr>
        <tr>
            <td>14</td>
            <td>INDIANA</td>
            <td>3.4</td>
        </tr>
        <tr>
            <td>14</td>
            <td>KANSAS</td>
            <td>3.4</td>
        </tr>
        <tr>
            <td>16</td>
    ...

CSS

#container {
    max-width: 400px; 
    height: 360px; 
    margin: 0 auto;
}
#table-div {
    max-width: 400px;
    margin: 3em auto;
}

JavaScript

// 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,
     ...