Highmaps labels show in incorrect position

Question

I've created a simple map with basic configurations. Labels are showing in the incorrect position. Any idea?

var map_chart;

function init_map(){
 
    map_chart =  new Highcharts.chart({
  
        chart: {
            type: 'map',
     renderTo: 'map_container'
        },

        series: [{
            mapData: Highcharts.maps['custom/world'],
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }]
    });

}

$( document ).ready(function() {
 
 init_map();

});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

<div id="map_container">
</div>

score -1 · Answer 1 · answered Feb 25 '17 at 08:38

-1

For proper way of creating maps using Map collection

From highmaps docs

In the map collection reference, each map name is followed by a link to an example. View the source of this example to get started. In short, the GeoJSON version of the map is loaded in a script tag in the page. This GeoJSON object is then registered to the Highcharts.maps object, and applied to the mapData option in the chart setup.

Add the map as a JavaScript element:

<script src="http://code.highcharts.com/mapdata/custom/world.js"> You can alternatively link to a specific version or subversion of the map at http://code.highcharts.com/mapdata/1.1/custom/world.js.

Load it in series.mapData:

mapData: Highcharts.maps['custom/world'], Alternatively, you can set the default map for all series with the chart.map option:

map: 'custom/world'

Join your data with the map. By default Highmaps is set up to map your data against the hc-keyproperty of the map collection, allowing you to define your data like this:

data: [['us-ny', 0], ['us-mi', 5], ['us-tx', 3], ['us-ak', 5]] For other data joining options, see the series.joinBy and series.keys options.

Fiddle demo link

answered Feb 25 '17 at 08:38

Deep 3015

9,929
5
30
54

Instead of copying and pasting from highcharts.com can you please explain which part of my code is incorrect and how to fix? Besides, The three steps you pasted above, are all followed in my script – Michele Feb 25 '17 at 12:21
you can see through fiddle link what mistakes you did. I simply go through the doc and did the post. and thanks for down voting **thumps Up :-)** – Deep 3015 Feb 25 '17 at 15:27
I also did go through the docs, which is expected before asking a question. An answer should have more than references to documentation and/or link to fiddles – Michele Feb 25 '17 at 16:24
fiddle is at the bottom of answer – Deep 3015 Feb 25 '17 at 16:27
I saw the fiddle, and? As I said, an answer shoudl have MORE than a fiddle. – Michele Feb 25 '17 at 16:29
doc explanation + fiddle is what i can give as answer – Deep 3015 Feb 25 '17 at 16:31
Ok I see that. I never said you should delete it. I only said that you should improve your answer, mainly because both the docs and fiddle are already available in the Highchart website. Anyway, the combination of your references + my answer should be enough for future people with the same issue – Michele Feb 25 '17 at 16:35
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/136624/discussion-between-deep-3015-and-michele). – Deep 3015 Feb 25 '17 at 16:40
Or maybe you can try to enjoy the weekend :-) I think I repeated my point 3+ times. Thanks for the answer – Michele Feb 25 '17 at 16:43

score -1 · Accepted Answer · answered Feb 25 '17 at 12:47

-1

This seems to be caused by how the highmaps object is initiated.

replacing

map_chart = new Highcharts.chart({

with

map_chart = new Highcharts.Map({

solves the problem, JSFiddle

answered Feb 25 '17 at 12:47

Michele

8,563
6
45
72

Highmaps labels show in incorrect position

2 Answers2