Toggle navigation Highcharts
  • Join Our Team
  • About Us
    • About Us
    • Contact Us
    • News
    • Newsletter
  • Home
  • Products
    • Highcharts
    • Highcharts Stock
    • Highcharts Maps
    • Highcharts Gantt
    • Highcharts Editor
    • Highcharts Mobile
    • Wrappers & add-ons
  • Demo
    • Highcharts demos
    • Stock demos
    • Maps demos
    • Gantt demos
    • Customer showcase
  • Developer
    • General Documentation
    • API Reference
    • Changelog
    • Roadmap
    • Code Examples
  • Support
  • Blog
  • Get it
  • Join Our Team
  • About Us
    • About Us
    • Contact Us
    • News
    • Newsletter

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

Highcharts Maps Demos › Small US with data labels

Default Dark Unica Sand Signika Grid Light
  • General
    • Overview
    • Color axis and data labels
    • Categorized areas
    • Distribution map
    • Highlighted areas
    • Detailed map US counties
    • Data classes and popup
    • Multiple data classes
    • Small US with data labels
    • Map with overlaid pie charts
    • Simple flight routes
    • Map with pattern fills
    • Map with marker clusters
  • Dynamic
    • Drilldown
    • Rich information on click
    • Fixed tooltip with HTML
    • Zoom to area by double click
    • Current temperatures in capitals of Europe
  • Input formats
    • GeoJSON areas
    • GeoJSON with rivers and cities
    • Map point with lat/long
    • Advanced lat/long
  • Series types
    • Map bubble
    • Heat map
    • Tile map honeycomb
    • Tile map circles
    • Tile map diamonds
    • Lines and points in maps
Hide Menu More...

Small US with data labels

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
Edit in jsFiddle Edit in CodePen
© 2020 Highcharts. All rights reserved.

Privacy Policy

Cookie Policy

Cookie Preferences