html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  var data = [

    {"x": "Mandarin chinese", "value": 1090000000, category: "Sino-Tibetan"},

    {"x": "English", "value": 983000000, category: "Indo-European"},

    {"x": "Hindustani", "value": 544000000, category: "Indo-European"},

    {"x": "Spanish", "value": 527000000, category: "Indo-European"},

    {"x": "Arabic", "value": 422000000, category: "Afro-Asiatic"},

    {"x": "Malay", "value": 281000000, category: "Austronesian"},

    {"x": "Russian", "value": 267000000, category: "Indo-European"},

    {"x": "Bengali", "value": 261000000, category: "Indo-European"},

    {"x": "Portuguese", "value": 229000000, category: "Indo-European"},

    {"x": "French", "value": 229000000, category: "Indo-European"},

    {"x": "Hausa", "value": 150000000, category: "Afro-Asiatic"},

    {"x": "Punjabi", "value": 148000000, category: "Indo-European"},

    {"x": "Japanese", "value": 129000000, category: "Japonic"},

    {"x": "German", "value": 129000000, category: "Indo-European"},

    {"x": "Persian", "value": 121000000, category: "Indo-European"}

  ];

​

  // create a tag cloud chart

  var chart = anychart.tagCloud(data);

​

  // set the chart title

  chart.title('15 most spoken languages')

  // set array of angles, by which words will be placed

  chart.angles([0])

  // enable color range

  chart.colorRange(true);

  // set color range length

  chart.colorRange().length('80%');

​

  // format tooltips

  var formatter = "{%value}{scale:(1)(1000)(1000)(1000)|()( thousand)( million)( billion)}";

  var tooltip = chart.tooltip();

  tooltip.format(formatter);

​

  // display chart

  chart.container("container");

  chart.draw();

});