HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function() {
2
3
// This sample uses 3rd party proj4 component
4
// that makes it possible to set coordinates
5
// for the points and labels on the map and
6
// required for custom projections and grid labels formatting.
7
// See https://docs.anychart.com/7.14.3/Maps/Map_Projections
8
9
var map = anychart.map();
10
// data set for the choropleth series
11
var dataSet_1 = anychart.data.set([
12
{'id': 'AU.JB', 'value': 1.5, "labelrank": 5, "middle-y": -36.085, "middle-x": 154.34, "middleXYMode": "absolute"},
13
{'id': 'AU.NT', 'value': 2, "middle-y": -20.159, "middle-x": 133.66, "middleXYMode": "absolute"},
14
{'id': 'AU.WA', 'value': 3.2},
15
{'id': 'AU.NS', 'value': 2.7}
16
]);
17
18
var dataSet_2 = anychart.data.set([
19
{'id': 'AU.CT', 'value': 1.12, "labelrank": 9, "middle-y": -35.355, "middle-x": 148.94, "middleXYMode": "absolute"},
20
{'id': 'AU.SA', 'value': 2.9, "labelrank": 5, "middle-y": -28.86, "middle-x": 134.678, "middleXYMode": "absolute"},
21
{'id': 'AU.VI', 'value': 3.86, "middle-y": -37.68, "middle-x": 143.77, "middleXYMode": "absolute"},
22
{'id': 'AU.QL', 'value': 1.1, "middle-y": -23.335, "middle-x": 143.71, "middleXYMode": "absolute"},
23
{'id': 'AU.TS', 'value': 1.6}
24
]);
25
26
map.geoData("anychart.maps.australia");
27
28
// set the title and its preferences
29
map.title().useHtml(true).hAlign('center');
30
map.title('<span style="font-size: 14px;">Labels Settings</span><br><span style="font-size:12px;">Set custom position for inside labels through the data set</span>');
31
32
// set the series
33
var series_1 = map.choropleth(dataSet_1);
34
var series_2 = map.choropleth(dataSet_2);
35
36
// enable labels
37
series_1.labels(true);
38
series_2.labels(true);
39
40
// set the overlapping mode for the map
41
map.overlapMode(false);
42
43
// set tooltips
44
series_1.tooltip().format("More women");
45
series_2.tooltip().format("More men");
46
47
// set the container
48
map.container('container');
49
map.draw();
50
});