html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples/tree-map-charts/top-1000-companies/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/tree-map-charts/top-1000-companies/data.json',

    function (data) {

      // makes tree from the data for the sample

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

      var chart = anychart.treeMap(dataTree);

​

      // setting the number of levels shown

      chart

        .hintDepth(1)

        // hintOpacity setting

        .hintOpacity(0.8)

        // disables selection opportunity

        .selectionMode('none');

​

      // sets credits for this sample

      chart

        .credits()

        .enabled(true)

        .url(

          'https://opendata.socrata.com/Government/Airplane-Crashes-and-Fatalities-Since-1908/q2te-8cvq'

        )

        .text('Data source: https://opendata.socrata.com')

        .logoSrc(

          'https://opendata.socrata.com/stylesheets/images/common/favicon.ico'

        );

​

      // sets title

      chart

        .title()

        .enabled(true)

        .useHtml(true)

        .text(

          'Top 1000 Companies by Revenue from INC.com<br/>' +

          '<span style="color: #212121; font-size: 12px">According to opendata.socrata.com</span>'

        );

​

      // sets labels settings

      chart

        .labels()

        .enabled(true)

        .fontSize(14)

        .textOverflow('')

        .textShadow({

          color: 'lightgray',

          offsetX: '2px',

          offsetY: '2px',

          blurRadius: '2px'

        });

​

      // sets tooltip settings and formatter

      var tooltip = chart.tooltip();

      tooltip.useHtml(true).format(function () {

        if (this.getData('city')) {

          return (

            '<span style="color: #bfbfbf">Revenue: </span>$' +

            parseInt(this.value).toLocaleString() +

            '<br/>' +

            '<span style="color: #bfbfbf">City: </span>' +

            this.getData('city')

          );

        }

        return (

          '<span style="color: #bfbfbf">Revenue: </span>$' +

          parseInt(this.value).toLocaleString()

        );

      });

​

      // set container id for the chart

      chart.container('container');

      // initiate chart drawing

      chart.draw();

    }

  );

});