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/sunburst-charts/the-population-of-the-europe/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/sunburst-charts/the-population-of-the-europe/data.json',

    function (data) {

      // makes tree from the data for the sample

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

​

      // create sunburst chart

      var chart = anychart.sunburst(dataTree);

​

      // set calculation mode

      chart.calculationMode('parent-independent');

​

      // set chart title

      chart.title('Europe Population');

​

      // set custom palette

      chart.palette(['#0288d1', '#d4e157', '#ff6e40', '#f8bbd0']);

​

      // format chart labels

      chart

        .labels()

        .format('{%Name}\n{%Value}{scale:(1000000)(1)|( mln)}');

​

      // format chart tooltip

      chart

        .tooltip()

        .format('Population: {%Value}{scale:(1000000)(1)|( mln)}');

​

      // the fill specified in the data has priority

      // set point fill

      chart.fill(function () {

        return anychart.color.darken(this.parentColor, 0.15);

      });

​

      // set container id for the chart

      chart.container('container');

      // initiate chart drawing

      chart.draw();

    }

  );

});