html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

var chart;

anychart.onDocumentReady(function () {

  var rawData = [

    { id: 'group1', name: 'Group 1' },

    { id: 'group2', name: 'Group 2' },

    { id: 'group3', name: 'Group 3' },

    { id: 'group4', name: 'Group 4' },

​

    { id: 'subgroup11', name: 'Subgroup 1.1', parent: 'group1', value: 2 },

    { id: 'subgroup12', name: 'Subgroup 1.2', parent: 'group1', value: 9 },

    { id: 'subgroup13', name: 'Subgroup 1.3', parent: 'group1', value: 3 },

​

    { id: 'subgroup21', name: 'Subgroup 2.1', parent: 'group2', value: 1 },

    { id: 'subgroup22', name: 'Subgroup 2.2', parent: 'group2', value: 4 },

    { id: 'subgroup23', name: 'Subgroup 2.3', parent: 'group2', value: 2 },

    { id: 'subgroup24', name: 'Subgroup 2.4', parent: 'group2', value: 2 },

    { id: 'subgroup25', name: 'Subgroup 2.5', parent: 'group2', value: 1 },

​

    { id: 'subgroup31', name: 'Subgroup 3.1', parent: 'group3' },

    { id: 'subgroup32', name: 'Subgroup 3.2', parent: 'group3', value: 1 },

​

    { id: 'subgroup311', name: 'Subgroup 3.1.1', parent: 'subgroup31', value: 4 },

    { id: 'subgroup312', name: 'Subgroup 3.1.2', parent: 'subgroup31', value: 2 },

​

    { id: 'subgroup41', name: 'Subgroup 4.1', parent: 'group4', value: 1 },

    { id: 'subgroup42', name: 'Subgroup 4.2', parent: 'group4', value: 3 },

    { id: 'subgroup43', name: 'Subgroup 4.3', parent: 'group4', value: 2 },

    { id: 'subgroup44', name: 'Subgroup 4.4', parent: 'group4', value: 1 }

  ];

​

  var treeData = anychart.data.tree(rawData, 'as-table');

  chart = anychart.circlePacking(treeData);

​

  chart.normal().labels().format(function () {

    return this.name + '\n' + 'Children count: ' + this.item.numChildren();

  });

​

  chart.selected().fill('lightblue');

​

  chart.tooltip().titleFormat(function () {

    var rv = this.name;

    var parent = this.item.getParent();

    while (parent) {

      rv = parent.get('name') + ' -> ' + rv;

      parent = parent.getParent();

    }

    return rv;

  });

​

  chart.palette(['#80cbc4', '#aed581', '#e6ee9c', '#ffcc80', '#ffab91']);

​

  chart.container('container');

  chart.draw();

});