html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadJsonFile(

    'https://gist.githubusercontent.com/shacheeswadia/b0d6b34a1910359e0e1a8fc0c84019a6/raw/4ab92ca6361f1bc9875d2854e2e1271bc991f86b/surfaceAreaData.json',

    function (data) {

      // processing of the data

      var result = [];

      for (var x = 0; x < data.x.length; x++) {

        for (var y = 0; y < data.y.length; y++) {

          result.push([x, data.y.sort()[y], data.z[x][y]]);

        }

      }

​

      // create surface chart

      var chart = anychart.surface();

​

      // enable markers and set data for them

     chart.markers().enabled(true).data(result);

      // set x axis scale maximum

      chart.xScale().maximum(data.x.length - 1);

​

      // set y and z axes rotation

      chart.rotationY(15);

      chart.rotationZ(45);

      // set y scale minimum/maximum

      chart.yScale().minimum(2006);

      chart.yScale().maximum(2020);

​

      // enable x and y axes minor ticks and labels

      chart.xAxis().minorTicks().enabled(true);

      chart.xAxis().minorLabels().enabled(true);

      chart.yAxis().minorTicks().enabled(true);

      chart.yAxis().minorLabels().enabled(true);

​

      // set scales ticks intervals

      chart.yScale().ticks().interval(8);

      chart.zScale().ticks().interval(40000);

      // hide the last label in y axis

      chart.yAxis().drawLastLabel(false);

​

      // set x, y and z axes labels font size

      chart.xAxis().labels().fontSize(10);

      chart.xAxis().minorLabels().fontSize(10);

      chart.yAxis().labels().fontSize(10);

      chart.yAxis().minorLabels().fontSize(10);

      chart.zAxis().labels().fontSize(10);

​

      // set x axis labels rotation

      chart.xAxis().labels().rotation(90);

      chart.xAxis().minorLabels().rotation(90);

​

      // set x axis labels format

      chart

        .xAxis()

        .labels()

        .format(function () {

          return data.x[Math.round(this.value)];

        });

      chart

        .xAxis()

        .minorLabels()

        .format(function () {

          return data.x[Math.round(this.value)];

        });

​

      // set x, y and z axes stroke settings 

      chart.xAxis().stroke(null); 

      chart.xAxis().ticks().stroke("1 lightgray");    

      chart.xAxis().minorTicks().stroke("1 lightgray");  

      chart.yAxis().stroke(null); 

      chart.yAxis().ticks().stroke("1 lightgray");    

      chart.yAxis().minorTicks().stroke("1 lightgray"); 

      chart.zAxis().stroke(null); 

      chart.zAxis().ticks().stroke("1 lightgray");  

      chart.zAxis().minorTicks().stroke("1 lightgray"); 

      // create color scale

      var customColorScale = anychart.scales.linearColor();

      customColorScale.colors([

        '#ffdd0e',

        '#BCA600',

        '#76A100',

        '#1b8366',

        '#007561'

      ]);

​

      // set color scale

      chart.colorScale(customColorScale);

​

      // enable and configure color range

      chart.colorRange().enabled(true).orientation('right');

​

      // tooltip settings

      chart

        .tooltip()

        .useHtml(true)

        .titleFormat(function () {

          return data.x[this.x];

        })

        .format(function () {

          return "Year: " + this.y + "<br>" + "GDP:$ " + this.z.toFixed(2); 

        });

      // set chart paddings

      chart.padding(25, 50, 75, 50);

      // set chart title

      chart.title('GDP per capita (PPP) in 2006-2020, in USD');

      // set container id for the chart

      chart.container('container');

​

      // initiate chart drawing

      chart.draw();

    }

  );

});