html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // To work with the data adapter you need to reference the data adapter script file from AnyChart CDN

  // https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js

​

  // Load JSON data and create a chart by JSON data

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

  // https://cdn.anychart.com/samples/general-features/load-json-data/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/general-features/load-json-data/data.json',

    function (data) {

      var chart = anychart.pie(data);

      chart

        .labels()

        .hAlign('center')

        .position('outside')

        .format('{%Value} trn.n({%PercentOfCategory}%)');

​

      // set chart title text settings

      chart

        .title('The global wealth')

        // set chart radius

        .radius('43%')

        // create empty area in pie chart

        .innerRadius('30%');

​

      // set legend title text settings

      chart

        .legend()

        // set legend position and items layout

        .position('center-bottom')

        .itemsLayout('horizontal')

        .align('center');

​

      // set container id for the chart

      chart.container('container');

      // initiate chart drawing

      chart.draw();

    }

  );

});