html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

// peaks function

function peaks(val) {

  var func =

    '3*(1-x).^2.*exp(-(x.^2) - (y+1).^2) - 10*(x/5 - x.^3 - y.^5).*exp(-x.^2-y.^2) - 1/3*exp(-(x+1).^2 - y.^2)';

  var result = [];

  for (var x = -val; x <= val + val / 15; x += val / 15) {

    for (var y = -val; y <= val + val / 15; y += val / 15) {

      result.push([x, y, math.eval(func, { x: x, y: y })]); // eslint-disable-line no-undef

    }

  }

  return result;

}

​

anychart.onDocumentReady(function () {

  // create surface chart

  var chart = anychart.surface(peaks(3));

​

  // enable and configure color range

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

​

  // set color range labels settings

  colorRange

    .labels()

    .fontColor('#333')

    .format(function () {

      return this.value.toFixed(2);

    });

​

  // set default chart y & z rotation

  chart.rotationY(15);

  chart.rotationZ(20);

​

  // set chart's mesh settings

  chart.stroke('1 #fff .2');

​

  // disable chart's box

  chart.box('#aaa .2');

​

  // set chart's padding

  chart.padding(0, 50, 25);

​

  // set X/Y/Z axis stroke color

  chart.xAxis().stroke('#000');

  chart.yAxis().stroke('#000');

  chart.zAxis().stroke('#000');

​

  // set X/Y/Z axis ticks stroke color

  chart.xAxis().ticks().stroke('#aaa .2');

  chart.yAxis().ticks().stroke('#aaa .2');

  chart.zAxis().ticks().stroke('#aaa .2');

​

  // set minimum and maximum for the X/Y/Z scales

  chart.xScale().minimum(-3).maximum(3);

  chart.yScale().minimum(-3).maximum(3);

  chart.zScale().minimum(-8).maximum(8);

​

  // set X axis labels settings

  chart

    .xAxis()

    .labels()

    .fontColor('#333')

    .format(function () {

      return this.value.toFixed(2);

    });

​

  // set Y axis labels settings

  chart

    .yAxis()

    .labels()

    .fontColor('#333')

    .format(function () {

      return this.value.toFixed(2);

    });

​

  // set Z axis labels settings

  chart

    .zAxis()

    .labels()

    .fontColor('#333')

    .format(function () {

      return this.value.toFixed(2);

    });

​

  // hide the last label in Y axis

  chart.yAxis().drawLastLabel(false);

​

  // set grids settings

  chart.xGrid().stroke('#aaa .2');

  chart.yGrid().stroke('#aaa .2');

  chart.zGrid().stroke('#aaa .2');

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

});