html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create data set on our data

  var chartData = {

    title: 'Flexural Strengths',

    header: ['#', 'PCC', '20 EW', '2% PPF', '2% nS'],

    rows: [

      ['7 Day', 2.52, 1.86, 2.28],

      ['14 Day', 3.49, 3.036, 3.25],

      ['28 Day', 4.265, 3.378, 3.905]

    ]

  };

​

  // create column chart

  var chart = anychart.column3d();

​

  // set chart data

  chart.data(chartData);

​

  // turn on chart animation

  chart.animation(true);

​

  chart.yAxis().labels().format('{%Value}{groupsSeparator: }');

​

  // set titles for Y-axis

  chart.yAxis().title('Strength (Mpa)');

​

  // turn on legend

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

​

  // set interactivity settings

  chart.interactivity().hoverMode('single');

​

  // set tooltip settings

  chart

    .tooltip()

    .positionMode('point')

    .position('center-top')

    .anchor('center-bottom')

    .offsetX(0)

    .offsetY(5)

    .format('{%SeriesName}: ${%Value}{groupsSeparator: }');

​

  // set 3D settings

  chart.zAspect('10%').zPadding(20).zAngle(45).zDistribution(true);

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

});