html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

​

  // create data set on our data

  var chartData = {

    header: ['#', 'High Fidelity', 'Low Fidelity'],

    rows: [

      ['Spatial Presence', 67, 65.6],

      ['Involvement', 57.66, 48.66666667],

      ['Realism', 43.75, 32.25],

      ['G', 72, 67],

    ]

  };

​

  // create radar chart

  var chart = anychart.radar();

  // set default series type

  chart.defaultSeriesType('area');

​

  // set chart data

  chart.data(chartData);

​

  // set chart yScale settings

  chart.yScale().minimum(0).maximumGap(0).ticks({ interval: 5 });

​

  // set axes labels settings

  chart.xAxis().labels().padding(5);

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

  chart.yAxis().ticks().stroke('#000000');

   chart

    .yAxis()

    .labels()

    .fontColor('#000000')

    .format('{%Value}{scale:(100)|()}');

  // set chart legend settings

  chart.legend().align('center').enabled(true);

  chart.legend().fontColor('#000000')

  // set tooltip format

  chart.tooltip().format('Temperature: {%Value}\xb0');

​

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});