html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  // This sample uses 3rd party proj4 component

  // that makes it possible to set coordinates

  // for the points and labels on the map and

  // required for custom projections and grid labels formatting.

  // See https://docs.anychart.com/7.14.3/Maps/Map_Projections

​

var map = anychart.map();

​

// data set for the choropleth series

var dataSet_1 = anychart.data.set([

  {'id': 'AU.JB', 'value': 1.5, label:{format: "Jervis \nBay \nTerritory", fontColor: "white"}},

  {'id': 'AU.NT', 'value': 2},

  {'id': 'AU.WA', 'value': 3.2},

  {'id': 'AU.NS', 'value': 2.7}

]);

​

var dataSet_2 = anychart.data.set([

  {'id': 'AU.CT', 'value': 1.12, label:{fontColor: "white"}},

  {'id': 'AU.SA', 'value': 2.9},

  {'id': 'AU.VI', 'value': 3.86},

  {'id': 'AU.QL', 'value': 1.1},

  {'id': 'AU.TS', 'value': 1.6}

]);

​

map.geoData("anychart.maps.australia");

​

// set the title and its preferences

map.title().useHtml(true).hAlign('center');

map.title('<span style="font-size:14px;">Callout</span><br><span style="font-size:12px;">Adjust label settings</span>');

​

// set the series

var series_1 = map.choropleth(dataSet_1);

var series_2 = map.choropleth(dataSet_2);

​

// enable labels

series_1.labels(true);

series_2.labels(true);

// set the overlapping mode for the map

map.overlapMode("noOverlap");

​

// set tooltips

series_1.tooltip().format("More women");

series_2.tooltip().format("More men");

​

// create callouts

calloutRight = map.callout(0);

calloutBottom = map.callout(1);

​

// set connectors stroke color

calloutRight.labels().connectorStroke('navy');

calloutBottom.labels().connectorStroke('navy');

​

// set regions

calloutBottom.items(["AU.CT"]);

calloutRight.items(["AU.JB"]);

​

// set callouts positions

calloutBottom.orientation("bottom");

calloutRight.orientation("right");

​

// set the label text position

calloutBottom.align("center");

calloutRight.align("center");  

​

// set width and length

calloutBottom.width(50);

calloutBottom.length(300);

calloutRight.width(70);

calloutRight.length(100);

​

// set the container

map.container('container');

map.draw();

});