Introducing the spider web chart

A spider web chart is just like a polar chart but, instead of being a circle, it's polygonal in shape. In the following example, we will take the same data we used in the previous example but, this time, we'll plot it with a spider web chart:

(function() {
  $( '#medal_table' ).highcharts({
    chart: {
      polar: true
    },
    title: {
      text: 'Olympics 2012 Medal Table'
    },
    xAxis: {
      title: {
        text: 'Countries'
      },
      categories: ['United States', 'China', 'Russian Federation', 'Great Britain', 'South Korea'],
      lineWidth: 0,
      tickmarkPlacement: 'on'
    },
    yAxis: {
      gridLineInterpolation: 'polygon'
    },
    series: [{
      name: 'Medals',
      data: [104, 88, 82, 65, 28],
      type: 'column'
    }]
  });
})();

Hence, the code is the same as that of a polar chart, except for some properties in the axes. These include lineWidth, gridLineInterpolation, and tickmarkPlacement.

Setting the lineWidth property...