html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  // data for chart

  var dataSet = anychart.data.set([

    ["P1", 162],

    ["P2", 134],

    ["P3", 116],

    ["P4", 122],

    ["P5", 178],

    ["P6", 144],

    ["P7", 125],

    ["P8", 176],

    ["P9", 156],

    ["P10", 195],

    ["P11", 135],

    ["P12", 176],

    ["P13", 167],

    ["P14", 142],

    ["P15", 117],

    ["P16", 113],

    ["P17", 132],

    ["P18", 146],

    ["P19", 169],

    ["P20", 184]

  ]);

​

  // chart type

  var chart = anychart.radar();

​

  // chart title

  chart.title("Radar chart - x axis labels background");

​

  // background fill

  var background = chart.background();

  background.enabled(true);

  background.fill("#EEEEEE");

​

  var xLabels = chart.xAxis().labels();

  // set paddings for labels

  xLabels.padding(5);

  // set font weight for labels

  xLabels.fontWeight(900);

  // axes background settings

  var labelsBackground = chart.xAxis().labels().background();

  // enable background

  labelsBackground.enabled(true);

  // background fill

  labelsBackground.fill("lightblue");

  // stroke color

  labelsBackground.stroke("blue");

  // corner type

  labelsBackground.cornerType("round");

  // corner size

  labelsBackground.corners(5);

  // set data and adjust visualisation

  var series = chart.area(dataSet);

  // area border color

  series.stroke("2 #11aaff");

  // area fill color

  series.fill("lightblue 0.5");

  // grid settings

  var grid = chart.grid(0);

  grid.evenFill("white");

  grid.oddFill("white");

  chart.legend(false);

​

  // draw chart

  chart.container("container");

  chart.draw();

});