html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

$.ajax({

    type: "GET",

    url: "https://static.anychart.com/images/docs/seat_map/house.svg",

    success: function (svgData) {

    createSeatMap(svgData);

}

    });

});

​

function createSeatMap(svg){

    // create a new seat map

    var chart = anychart.seatMap();

    // load SVG data

    chart.geoData(svg);              

    // set the title      

    chart.title("Adjust labels");  

    // create new series

    seatMapSeries = chart.choropleth();

    // load data

    seatMapSeries.data([

    {id: "Hall", value: "720", info: "30\' 0\" x 24\'0\"", sq: "720 sq. ft."},

    {id: "Room2", value: "165", info: "15\' 0\" x 11\'0\"", sq: "165 sq. ft."},

    {id: "WC", value: "49", info: "7\' 0\" x 7\'0\"", sq: "49 sq. ft."},

    {id: "Room1", value: "143", info: "11\' 0\" x 13\'0\"", sq: "143 sq. ft."},

    {id: "Kitchen", value: "208", info: "13\' 0\" x 16\'0\"", sq: "208 sq. ft."}

    ]);

​

    // set the filling color

    seatMapSeries.fill("white");

    // allow labels to overlap each other

    seatMapSeries.overlapMode("allow-overlap");

    seatMapSeries.tooltip(false);

​

    labels = seatMapSeries.labels();

    // enable labels and adjust them

    labels.enabled(true);

    seatMapSeries.labels({fontSize: 10, background: {fill: 'green .3'}});

    labels.format("{%id} \n{%info} \n{%sq}");

    labels.offsetY(-13);

​

    // load svg-file without elements with no values

    chart.unboundRegions("hide");

​

    // set container id for the chart

    chart.container("container");

    // initiate chart drawing

    chart.draw();  

};