A polar chart is a circular chart in which data points are plotted at a distance and angle from the center of the circle. The categories for the x axis are located along the circumference of the circle whereas the labels for the y axis are located inside the circle at a certain distance from the center. A polar chart can plot one or more series, and it is best used to compare the data between different series.

Consider the data from the previous example that shows the fuel consumption by the EU. We can plot this data using a polar chart since the data is based on the type of fuel (categories).

The following code draws the polar chart for the mentioned data:

(function() {
  $( '#chart_container' ).highcharts({
    chart: {
      polar: true
    },
    title: {
      text: 'Fuel Consumption by Type for the Year 2012'
    },
    subtitle: {
      text: 'Source: <a href="http://bp.com">BP</a>',
      useHTML: true
    },
    pane: {
      startAngle: 0,
      endAngle: 360
    },
    xAxis: {
      categories: ['Oil', 'Natural Gas', 'Coal', 'Nuclear Energy', 'Hydroelectricity', 'Renewable']
    },
    yAxis: {
      title: {
        text: 'MMT'
      }
    },
    series: [{
      name: 'EU',
      type: 'column',
      data: [618.8, 399.7, 293.4, 199.9, 76.1, 97.7]
    }]
  });
})();

In order for this code to work, include the Highcharts-4.x.x/js/highcharts-more.js file after the highcharts.js file on the page.

By setting the polar property on chart to true, we enabled the polar chart functionality. Individual series can then be given their own type as we have given the column type to the EU series.

In the pane component, we have set two properties: startAngle and endAngle. The default values are 0 and 360 respectively, but you can give your custom values depending on the type of data you are plotting.

The following is the screenshot of the chart produced by the preceding code: