score:1
I just updated code snippet with latest Highmap.js
$(function () {
var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']),
// Some responsiveness
small = $('#container').width() < 400;
// Set drilldown pointers
$.each(data, function (i) {
this.drilldown = this.properties['hc-key'];
this.value = i; // Non-random bogus data
});
// Instanciate the map
Highcharts.mapChart('container', {
chart: {
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
mapKey = 'countries/us/' + e.point.drilldown + '-all',
// Handle error, the timeout is cleared on success
fail = setTimeout(function () {
if (!Highcharts.maps[mapKey]) {
chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
fail = setTimeout(function () {
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', function () {
data = Highcharts.geojson(Highcharts.maps[mapKey]);
// Set a non-random bogus value
$.each(data, function (i) {
this.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: 'USA' });
}
}
},
title: {
text: 'Highcharts Map Drilldown'
},
subtitle: {
text: 'USA',
floating: true,
align: 'right',
y: 50,
style: {
fontSize: '16px'
}
},
legend: small ? {} : {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
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}'
}
}],
drilldown: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
}
});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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/drilldown.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/mapdata/countries/us/us-all.js"></script>
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
score:6
Well, I've found the solution. You were using an old version of Highmaps, probably 4 or 5. Just update it to +6 and that's all: https://code.highcharts.com/maps/highmaps.js
Source: stackoverflow.com
Related Query
- Drilldown in highmaps - how to remove a series
- How to remove the halo/glow around a marker upon hovering a series in Highcharts
- How to remove a series in Highcharts by name
- highmaps click on country and change its background color, Also remove the Series 1 from tooltips
- Highcharts - How to remove drilldown link on empty items?
- How to set up drilldown feature for multiple boxplot series in highcharter?
- How to efficiently remove all series from highchart/highstock and then add many more
- How to find max: value of colorAxis for highMaps drilldown maps
- Highcharts : How to remove the gap between series and vertical axis?
- How to have multiple highcharts with different series data in vuejs without repeating code
- Highmaps - How to remove canary islands from spain highlight
- Column based Highchart drilldown series assign color code to each column
- How to remove name from legend in Highmaps
- How to remove batch of points in the period based on xAxis(time) coordinates from the series in Highstock
- How to remove Series name on bottom and we are not getting bar value on top of each bar and also each bar description is aligned cross in Columnchart
- R Package Highcharter: How do I drilldown to multiple series stacked column graph?
- how to remove an extra series in highchart
- How to dynamically remove the whole Column from a single series HighCharts column graph?
- Highmaps - how to draw two mabBubble series on one chart
- highchart: How to Remove Series space (after & before)
- How to remove button from Highcharts
- Proper way to remove all series data from a highcharts chart?
- How can I hide series from a HighCharts legend?
- How to prevent my stacked series from being in reverse order?
- How to get multiple series data in tooltip highcharts?
- How to display highchart series line marker symbol from tooltip formatter?
- How can I hide a series from initially being displayed in Highcharts
- Hiding _groups_ of series in Highcharts and jQuery: how to get acceptable performance?
- remove series by name or id in highcharts
- How to remove "Values" and "series" from highcharts?
More Query from same tag
- Highcharts Map bubble on Pacific Centered World map
- How to auto adjust the bar with respect to the plotBand option in xrange highcharts?
- Using HighCharts styledMode in Angular 8 application
- Tooltip formatter for multiple axes in Highcharts.js
- Change color of highcharter r choropleth map
- why x-axis showing alternate months rather every month?
- Reduce space between legend text and icon in Highchart
- How to control Two chart of highstock with scroll bar
- Highcharts: How to display multiple tooltips by click in multiple series with shared true
- Is it possible to reparent the high charts legend?
- Highcharts With Drilldown In IE10+ Does Not Show Underlined Label Style
- How to apply the Renderer text() function multiple times to a Highcharts chart?
- highchart's hidden chart renders out of container in Angularjs
- Highcharts - Column/bar chart with target lines
- How to addSeries in HighChart
- Highchart Marker image hides if large dataset is produced
- Set at the same level the unit of two yaxis highcharts
- Adding HTML tables dynamically in Highcharts
- Exporting Chart Throws RangeError: Maximum Call Stack Size Exceeded in highcharts-more.js
- I am trying to include india map in my highchart code
- How is the api doc generated @ http://api.highcharts.com/
- highchart save image using exporting java and phantomjs
- Highstocks change range selector to dropdown
- highcharts marker: {radius: 10} on individual data points makes certain data points disappear?
- How to input plot data into highcharts with rails
- r highcharter package barplot group vs. color
- highcharts column stacking Y axis sync - value seem to be represented as an increase on that of previous column
- How do I stop Highcharts creating a new gridline at the extremities of the chart unless a data point exceeds the min/max gridline?
- How to show the transition in highchart series graph without refreshing the html webpage?
- Remove Selection Of bar in highchart with hover working