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

/*
TODO:
- Check data labels after drilling. Label rank? New positions?
*/

let data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']);
const separators = Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline');

// Set drilldown pointers
data.forEach((d, i) => {
    d.drilldown = d.properties['hc-key'];
    d.value = i; // Non-random bogus data
});

function getScript(url, cb) {
    const script = document.createElement('script');
    script.src = url;
    script.onload = cb;
    document.head.appendChild(script);
}

// Instantiate the map
Highcharts.mapChart('container', {
    chart: {
        events: {
            drilldown: function (e) {
                if (!e.seriesOptions) {
                    const chart = this,
                        mapKey = 'countries/us/' + e.point.drilldown + '-all';

                    // Handle error, the timeout is cleared on success
                    let fail = setTimeout(() => {
                        if (!Highcharts.maps[mapKey]) {
                            chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
                            fail = setTimeout(() => {
                                chart.hideLoading();
                            }, 1000);
                        }
                    }, 3000);

                    // Show the spinner
                    chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner

                    // Load the drilldown map
                    getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', () => {
                        data = Highcharts.geojson(Highcharts.maps[mapKey]);

                        // Set a non-random bogus value
                        data.forEach((d, i) => {
                            d.value = i;
                        });

                        // Hide loading and add series
                        chart.hideLoading();
                        clearTimeout(fail);
                        chart.addSeriesAsDrilldown(e.point, {
                            name: e.point.name,
                            data: data,
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}'
                            }
                        });
                    });
                }

                this.setTitle(null, { text: e.point.name });
            },
            drillup: function () {
                this.setTitle(null, { text: '' });
            }
        }
    },

    title: {
        text: 'Highcharts Map Drilldown'
    },

    subtitle: {
        text: '',
        floating: true,
        align: 'right',
        y: 50,
        style: {
            fontSize: '16px'
        }
    },

    colorAxis: {
        min: 0,
        minColor: '#E6E7E8',
        maxColor: '#005645'
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

    plotOptions: {
        map: {
            states: {
                hover: {
                    color: '#EEDD66'
                }
            }
        }
    },

    series: [{
        data: data,
        name: 'USA',
        dataLabels: {
            enabled: true,
            format: '{point.properties.postal-code}'
        }
    }, {
        type: 'mapline',
        data: separators,
        color: 'silver',
        enableMouseTracking: false,
        animation: {
            duration: 500
        }
    }],

    drilldown: {
        activeDataLabelStyle: {
            color: '#FFFFFF',
            textDecoration: 'none',
            textOutline: '1px #000000'
        },
        drillUpButton: {
            relativeTo: 'spacingBox',
            position: {
                x: 0,
                y: 60
            }
        }
    }
});
              

Highcharts Maps Demos › Drilldown

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

Drilldown

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

Privacy Policy

Cookie Policy

Cookie Preferences