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

Highcharts.getJSON(
    'https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/us-counties-unemployment.json',
    function (data) {

        /**
         * Data parsed from http://www.bls.gov/lau/#tables
         *
         * 1. Go to http://www.bls.gov/lau/laucntycur14.txt (or similar, updated
         *    datasets)
         * 2. In the Chrome Developer tools console, run this code:
         *    copy(JSON.stringify(document.body.innerHTML.split('\n').filter(function (s) { return s.indexOf('<PUT DATE HERE IN FORMAT e.g. Feb-14>') !== -1; }).map(function (row) { row = row.split('|'); return { code: 'us-' + row[3].trim().slice(-2).toLowerCase() + '-' + row[2].trim(), name: row[3].trim(), value: parseFloat(row[8]) }; })))
         * 3. The data is now on your clipboard, paste it below
         * 4. Verify that the length of the data is reasonable, about 3300
         *    counties.
         */

        var countiesMap = Highcharts.geojson(
                Highcharts.maps['countries/us/us-all-all']
            ),
            // Extract the line paths from the GeoJSON
            lines = Highcharts.geojson(
                Highcharts.maps['countries/us/us-all-all'], 'mapline'
            ),
            // Filter out the state borders and separator lines, we want these
            // in separate series
            borderLines = lines.filter(
                l => l.properties['hc-group'] === '__border_lines__'
            ),
            separatorLines = lines.filter(
                l => l.properties['hc-group'] === '__separator_lines__'
            );

        // Add state acronym for tooltip
        countiesMap.forEach(function (mapPoint) {
            mapPoint.name = mapPoint.name + ', ' +
                mapPoint.properties['hc-key'].substr(3, 2);
        });

        document.getElementById('container').innerHTML = 'Rendering map...';

        // Create the map
        setTimeout(function () { // Otherwise innerHTML doesn't update
            Highcharts.mapChart('container', {
                chart: {
                    borderWidth: 1,
                    marginRight: 20 // for the legend
                },

                title: {
                    text: 'US Counties unemployment rates, January 2018'
                },

                legend: {
                    layout: 'vertical',
                    align: 'right',
                    floating: true,
                    backgroundColor: ( // theme
                        Highcharts.defaultOptions &&
                        Highcharts.defaultOptions.legend &&
                        Highcharts.defaultOptions.legend.backgroundColor
                    ) || 'rgba(255, 255, 255, 0.85)'
                },

                mapNavigation: {
                    enabled: true
                },

                colorAxis: {
                    min: 0,
                    max: 25,
                    tickInterval: 5,
                    stops: [[0, '#F1EEF6'], [0.65, '#900037'], [1, '#500007']],
                    labels: {
                        format: '{value}%'
                    }
                },

                plotOptions: {
                    mapline: {
                        showInLegend: false,
                        enableMouseTracking: false
                    }
                },

                series: [{
                    mapData: countiesMap,
                    data: data,
                    joinBy: ['hc-key', 'code'],
                    name: 'Unemployment rate',
                    tooltip: {
                        valueSuffix: '%'
                    },
                    borderWidth: 0.5,
                    states: {
                        hover: {
                            color: '#a4edba'
                        }
                    },
                    shadow: false
                }, {
                    type: 'mapline',
                    name: 'State borders',
                    data: borderLines,
                    color: 'white',
                    shadow: false
                }, {
                    type: 'mapline',
                    name: 'Separator',
                    data: separatorLines,
                    color: 'gray',
                    shadow: false
                }]
            });
        }, 0);
    }
);
              

Highcharts Maps Demos › Detailed map, US counties

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

Detailed map, US counties

Downloading map...
Edit in jsFiddle Edit in CodePen
© 2020 Highcharts. All rights reserved.

Privacy Policy

Cookie Policy

Cookie Preferences