html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

var dataSet = anychart.data.set([

        {name: 'Planning and organizational skills', applicant: 5},

        {name: 'Flexibility / Adaptability to changes', applicant: 5, company_high: 6, company_low: 8},

        {name: 'Results-oriented', applicant: 7, company_high: 2, company_low: 4},

        {name: 'Commitment and responsibility', applicant: 7},

        {name: 'Communication efficiency (adequacy and precision)', applicant: 10, company_high: 6, company_low: 8},

        {name: 'Development of business opportunities', applicant: 8},

        {name: 'Learning and innovation', applicant: 7}

    ]);

​

    chart = anychart.polar();

​

    // setup chart appearence settings

    chart.startAngle(-27);

    chart.innerRadius('10%');

​

    // setup chart scales settings

    chart.yScale().minimum(2).maximum(10);

    chart.xScale('ordinal');

    chart.xScale().names('name');

    chart.sortPointsByX(true);

​

    // setup chart interactivity and tooltip settings

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

    chart.tooltip().displayMode('union');

    chart.tooltip().titleFormat("{%name}");

​

    // setup chart axes and grid settings

    chart.yAxis(false);

    chart.xAxis().labels()

                 .padding(7)

                 .fontSize(10)

                 .hAlign('center')

                 .wordWrap('normal');

    chart.xAxis().fill('rgb(237,236,239)')

                 .stroke('none');

    chart.xAxis().ticks()

                 .length('100%')

                 .stroke('#FEFEFE');

​

    // setup chart legend settings

    var legend = chart.legend();

    legend.enabled(true);

    legend.positionMode('outside');

    legend.itemsLayout('vertical');

    legend.position('bottom');

    legend.align('left');

    legend.margin().top(-30);

    legend.itemsSpacing(5);

​

    // create ploygon series

    var polygonSeries = chart.polygon(dataSet.mapAs({x: 'x', value: 'applicant'}));

    polygonSeries.name('Applicant');

    polygonSeries.color('#CD4A2D');

    polygonSeries.fill('rgba(180, 180, 180, 0.3)');

    polygonSeries.zIndex(31);

    polygonSeries.labels().enabled(true).fontColor('#CD4A2D').fontSize(11).fontWeight('bold');

    polygonSeries.legendItem().iconFill('#CD4A2D').iconType('line').iconStroke('6 #CD4A2D');

​

    // create range column series

    var companySeries = chart.rangeColumn(dataSet.mapAs({x: 'x', high: 'company_high', low: 'company_low' }));

    companySeries.pointWidth('85%');

    companySeries.name('Company average');

    companySeries.color('#E2DFE0');

​

    // set chart container id

    chart.container('container');

​

    // make even/odd xAxis labels coloring

    chart.listen('chartDraw', function () {

    var stage = chart.container().getStage();

      stage.suspend();

      var count = chart.xAxis().labels().getLabelsCount();

      for (var i = 0; i < count; i++) {

        var color = i % 2 ? '#CD4A2D' : '#4C4C4C';

        var label = chart.xAxis().labels().getLabel(i);

        if (label) {

          label.fontColor(color);

          label.draw();

        }

      }

      stage.resume();

    });

​

    // initiate chart drawing

    chart.draw();

});