html, body, #container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create a data set

  var chartData = {

      rows: [

        ['Ransomeware', 32],

        ['Phishing', 42],

        ['Data Breach/Leak', 36],

        ['Denail of Service', 25],

        ['Other', 45]

      ]

    };

​

  // create a radar chart

  var chart = anychart.radar();

  // set the series type

  chart.defaultSeriesType('area');

​

  // set the chart data

  chart.data(chartData);

  // set the color palette

  chart.palette(['#E5593499', '#9BC53DE6', '#64B5F6BF']);

  // configure the appearance of the y-axis

  chart.yAxis().stroke('#545f69');

  chart.yAxis().ticks().stroke('#545f69');

  // configure the stroke of the x-grid

  chart.xGrid().stroke({

    color: "#545f69",

    thickness: 0.5,

    dash: "10 5"

  });

  // configure the appearance of the y-grid

  chart.yGrid().palette(['gray 0.05', 'gray 0.025']);

  // set the y scale ticks interval

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

  // set the hover mode

  chart.interactivity().hoverMode('by-x');

​

  // set the marker type

  chart.markerPalette(['star5']);

  // improve the tooltip

  chart.tooltip()

    .displayMode('union')

    .useHtml(true)

    .format(function(e){

      console.log(this);

      return '<span style="color:' + this.series.color() + '">' + 

        this.seriesName + ": " + this.value + "</span>"

    });

  // set the chart legend

  chart.legend().enabled(true);

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

​

});