html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    // This sample uses 3rd party Proj4js JavaScript library to transform coordinates

    // See https://docs.anychart.com/Maps/Map_Projections to learn more.

​

    var dataSet = anychart.data.set([

        {id: "FR.A", title: "Strasbourg", value: 928},

        {id: "FR.B", title: "Bordeaux", value: 192},

        {id: "FR.C", title: "Clermont-Ferrand", value: 963},

        {id: "FR.P", title: "Caen", value: 266},

        {id: "FR.D", title: "Dijon", value: 518},

        {id: "FR.E", title: "Rennes", value: 324}

    ]);

    dataSet.mapAs({id: "id"});

​

    var map = anychart.map();

    map.geoData(anychart.maps.france);

​

    var series = map.choropleth(dataSet);

    series.labels({

        format: (function () {

            return this.getData("title");

        })

    });

​

    map.container("container");

    map.draw();

​

    var point = series.getPoint(0);

​

    // Set Y center for the point label.

    point.middleY(-0.4);

});