html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadJsonFile('https://gist.githubusercontent.com/shacheeswadia/17dc3b3d4ac9b63ac5ac6833944f3a94/raw/07c4bec103d22ec2824453a33d41868fd476db3d/dataPackedCircles.json',

    function(data) {

​

      // set data

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

      // create a circle packing chart instance

      var chart = anychart.circlePacking(treeData);

      // customize colors:

      // chart design theme

      anychart.theme('darkGlamour');    

      // background

      chart.background('#333');

      // fill

      chart.fill('#333');

      // stroke

      chart.stroke(function () {

        return {

          thickness: 2,

          color: this.sourceColor

        };

      });

    // customize the tooltip

    chart

      .tooltip()

      .useHtml(true)

      .titleFormat('{%name}')

      .format( function(){

        let dataValue = this.item.ka;

        if(this.depth == 2){ 

          return '<span style = font-size:14px;">Popularity Value - ' + dataValue.value + '</span>' +

         '<br/><span style = font-size:14px;">Artist - ' + dataValue.artist + '</span>' + 

         '<br/><span style = font-size:14px;">Year - ' + dataValue.year + '</span>'  

        }else{

          return '<span style = "color: #fff; font-size:14px;">Popularity Value - ' + this.value + '</span>'

        }

      });        

      // add a chart title and customize it

      chart

        .title()

        .enabled(true)

        .useHtml(true)

        .text(

          '<span style = "color: #fff; font-size:20px;">Top 100 Most Streamed Songs On Spotify By Genre</span>' +

          '<br/><span style="color:#1db954; font-size: 18px;">(based on the number of Spotify streams)</span>'

        );

      chart.container('container');

      chart.draw();

    }

  );

});