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/starbucks-by-country/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/tree-map-charts/starbucks-by-country/data.json',

    function (data) {

      // define themes settings for font

      var customTheme = {

        defaultFontSettings: {

          fontFamily: '"Source Sans Pro", sans-serif',

          fontSize: 13

        }

      };

​

      anychart.theme(customTheme);

​

      // makes tree from the data for the sample

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

      var chart = anychart.treeMap(dataTree);

​

      // sets scale

      var scale = anychart.scales.ordinalColor([

        { less: 10 },

        { from: 10, to: 100 },

        { from: 100, to: 500 },

        { from: 500, to: 1000 },

        { greater: 1000 }

      ]);

​

      // sets colors for scale

      scale.colors([

        '#d8b597',

        '#CFA185',

        '#C3866C',

        '#AD5841',

        '#9b301c'

      ]);

​

      // sets chart settings

      chart.selectionMode('none').colorScale(scale);

​

      chart.hovered().fill('#fcece2').stroke('#a1887f');

​

      // sets credits for this sample

      chart

        .credits()

        .enabled(true)

        .url(

          'https://opendata.socrata.com/Business/All-Starbucks-Locations-in-the-World/xy4y-c4mk'

        )

        .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)

        .fontSize(18)

        .text(

          'Starbucks Distribution by Country<br/>' +

          '<span style="color: #212121; font-size: 14px">' +

          'According to opendata.socrata.com</span>'

        );

​

      // turns legend on

      chart.legend().enabled(true).padding([0, 0, 20, 0]);

​

      // sets labels settings

      chart.labels().enabled(true).fontSize(16).textOverflow('');

​

      // sets tooltip settings and formatter

      var tooltip = chart.tooltip();

      tooltip

        .title()

        .padding({ bottom: 8 })

        .fontSize(16)

        .fontColor('#5d4037');

      tooltip

        .background()

        .fill('#d7ccc8 0.9')

        .stroke('3 #bcaaa4')

        .corners(7);

      tooltip

        .useHtml(true)

        .padding([10, 20])

        .separator(false)

        .fontColor('#3e2723')

        .format(function () {

          return (

            '<span style="color: #3e2723">Number of Starbucks: </span>' +

            parseInt(this.value).toLocaleString()

          );

        });

​

      // set container id for the chart

      chart.container('container');

      // initiate chart drawing

      chart.draw();

    }

  );

});