html, body, #container {

    width: 90%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  var chart = anychart.polar();

​

  // add the lines to the chart

  var series0 = chart.polyline(getData()[0]);

  series0.color("#4d9ece");

  var series1 = chart.polyline(getData()[1]);

  series1.color("#ff9941");

  var series2 = chart.polyline(getData()[2]);

  series2.color("#0db341");

  var series3 = chart.polyline(getData()[3]);

  series3.color("#f35556");

  var series4 = chart.polyline(getData()[4]);

  series4.color("#ad6ac7");

  var series5 = chart.polyline(getData()[5]);

  series5.color("#16ccda");

  var series6 = chart.polyline(getData()[6]);

  series6.color("#f873c7");

​

  // set the maximum value of the x-scale

  chart.xScale()

    .maximum(360)

    .ticks([0,45,52,60,75,90,110,120,135,150,165]);

  chart.yScale()

    .minimum(0)

    .ticks([0,2,4,6,8,10]);

​

​

  // set the interactivity mode

  chart.interactivity("by-x");

​

  // format labels

  chart.yAxis().labels()

    .anchor('left-center')

    .offsetY(-2)

    .format('{%value}kts')

  chart.xAxis().labels().format('{%value}°')

  chart.xAxis().ticks().length(0);

​

  // customize grids

  chart.xGrid().stroke({

    dash: "1 5"

  });

  chart.yGrid().stroke({

    dash: "1 5"

  });

  chart.tooltip().titleFormat('{%x}°');

​

  // set the container id

  chart.container("container");

  relocateChart(chart);

  chart.draw();

​

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

    relocateChart(chart);

  });

});

​

function relocateChart(chart) {

  chart.left(-chart.container().getBounds().width+30);

}

​

function getData() {

  return [[

    {x: 52, value: 5.5},

    {x: 60, value: 5.9},

    {x: 75, value: 6.24},

    {x: 90, value: 6.24},

    {x: 110, value: 6.28},

    {x: 120, value: 6.08},

    {x: 135, value: 5.36},

    {x: 150, value: 4.5},

    {x: 160, value: null},

  ],

          [

            {x: 52, value: 6.6},

            {x: 60, value: 6.85},

            {x: 75, value: 7.02},

            {x: 90, value: 7.06},

            {x: 110, value: 7.21},

            {x: 120, value: 7.1},

            {x: 135, value: 6.65},

            {x: 150, value: 5.66},

            {x: 160, value: null},

          ],

          [

            {x: 52, value: 6.98},

            {x: 60, value: 7.19},

            {x: 75, value: 7.42},

            {x: 90, value: 7.47},

            {x: 110, value: 7.71},

            {x: 120, value: 7.71},

            {x: 135, value: 7.31},

            {x: 150, value: 6.65},

            {x: 160, value: null},

          ],   

          [

            {x: 52, value: 7.12},

            {x: 60, value: 7.34},

            {x: 75, value: 7.74},

            {x: 90, value: 7.95},

            {x: 110, value: 8.08},

            {x: 120, value: 8.36},

            {x: 135, value: 7.91},

            {x: 150, value: 7.25},

            {x: 160, value: null},

          ],

          [

            {x: 52, value: 7.2},

            {x: 60, value: 7.44},

            {x: 75, value: 7.94},

            {x: 90, value: 8.42},

            {x: 110, value: 8.48},

            {x: 120, value: 8.82},

            {x: 135, value: 8.7},

            {x: 170, value: 7},

            {x: 175, value: null},

          ],

          [

            {x: 52, value: 7.3},

            {x: 60, value: 7.53},

            {x: 75, value: 8.07},

            {x: 90, value: 8.72},

            {x: 110, value: 8.87},

            {x: 120, value: 9.27},

            {x: 135, value: 9.71},

            {x: 150, value: 8.34},

            {x: 160, value: null},

          ],

          [

            {x: 52, value: 7.41},

            {x: 60, value: 7.73},

            {x: 75, value: 8.35},

            {x: 90, value: 8.99},

            {x: 110, value: 9.89},

            {x: 120, value: 10.22},

            {x: 135, value: 11.4},

            {x: 150, value: 10.43},

            {x: 160, value: null},

          ]];

}