Small US with data labels

author(s): Torstein Hønsi

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/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/accessibility.js"></script>

<div id="container"></div>
<div id="table-div">
    <table id="data">
        <tr>
            <td>1</td>
            <td>NORTH DAKOTA</td>
            <td>2.0</td>
        </tr>
        <tr>
            <td>1</td>
            <td>SOUTH DAKOTA</td>
            <td>2.0</td>
        </tr>
        <tr>
            <td>3</td>
            <td>VERMONT</td>
            <td>2.1</td>
        </tr>
        <tr>
            <td>4</td>
            <td>NEBRASKA</td>
            <td>2.5</td>
        </tr>
        <tr>
            <td>4</td>
            <td>NEW HAMPSHIRE</td>
            <td>2.5</td>
        </tr>
        <tr>
            <td>6</td>
            <td>MARYLAND</td>
            <td>2.7</td>
        </tr>
        <tr>
            <td>6</td>
            <td>VIRGINIA</td>
            <td>2.7</td>
        </tr>
        <tr>
            <td>8</td>
            <td>IOWA</td>
            <td>2.8</td>
        </tr>
        <tr>
            <td>8</td>
            <td>MINNESOTA</td>
            <td>2.8</td>
        </tr>
        <tr>
            <td>8</td>
            <td>MISSISSIPPI</td>
            <td>2.8</td>
        </tr>
        <tr>
            <td>11</td>
            <td>KANSAS</td>
            <td>2.9</td>
        </tr>
        <tr>
            <td>11</td>
            <td>UTAH</td>
            <td>2.9</td>
        </tr>
        <tr>
            <td>11</td>
            <td>WISCONSIN</td>
            <td>2.9</td>
        </tr>
        <tr>
            <td>11</td>
            <td>WYOMING</td>
            <td>2.9</td>
        </tr>
        <tr>
            <td>15</td>
           ...

CSS

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

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

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

JavaScript

// Source: https://www.bls.gov/web/laus/laumstrk.htm

(async () => {

    const topology = await fetch(
        'https://code.highcharts.com/mapdata/countries/us/custom/us-small.topo.json'
    ).then(response => response.json());

    // Load the data from the HTML table and tag it with an upper case name used
    // for joining
    const data = [];

    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]
                });
            });
        }
    });

    // Prepare map data for joining
    topology.objects.default.geometries.forEach(function (g) {
        if (g.properties && g.properties.name) {
            g.properties.ucName = g.properties.name.toUpperCase();
        }
    });

    // Initialize the chart
    Highcharts.mapChart('container', {

        title: {
            text: 'US unemployment rate in May 2024',
            align: 'left'
        },

        subtitle: {
            text: 'Small US map with data labels',
            align: 'left'
        },

        mapNavigation: {
            enabled: true,
            enableButtons: false
        },

        xAxis: {
            labels: {
                enabled: false
            }
        },

        colorAxis: {
            labels: {
                format: '{value}%'
            },
            stops: [
                [0.00, '#440154'],
                [0.14, '#46327f'],
                [0.29, '#365c8d'],
                [0.43, '#277f8e'],
                [0.57, '#1fa187'],
                [0.71, '#4ac26e'],
                [0.86, '#9fda3a'],
                [1.00, '#fde725']
            ],
            min: 0,
            max: 6
        },

        series: [{
            mapData: topology,
            data,
            joinBy: 'ucName',
  ...