Below is an html file that has the ability to create a wind rose chart with the same exact data and attributes. The problem is, there are two calls to create wind rose charts `new Highcharts.StockChart(commonOptions)` and `Highcharts.chart('container')`. If you look at both of the charts, you can see they create different charts (mainly in how tooltips are displayed). The first call displays all the tooltips and the same time while the second call creates normal tooltips. There must be some option(s) that causes this but after many hours have not been able to find it. 

```
<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://code.highcharts.com/stock/highstock.js"></script>
        <script src="https://code.highcharts.com/stock/highcharts-more.js"></script>
        <script type="text/javascript">
            window.onload = function() {

    var categories = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
    var commonOptions = {
       chart: {
        renderTo: 'container',
        polar: true,
        type: 'column'
      },
      xAxis: {
        min: 0,
        max: 360,
        tickInterval: 22.5,
        tickmarkPlacement: 'on',
        labels: {
          formatter: function() {
            return categories[parseInt(this.value / 22.5)] ;
          }
        }
      },
      yAxis: {
        min: 0,
        endOnTick: false,
        reversedStacks: false
      },
      plotOptions: {
        series: {
          stacking: 'normal',
          shadow: false,
          groupPadding: 0,
          pointPlacement: 'on'
        }
      },
  rangeSelector: {enabled:false},
  navigator: {enabled: false},
    scrollbar: {enabled: false},
        series: [{ name:"a",
        data: [{x: 0, y: 5}, {x: 22.5,y: 3}, {x: 45,y: 4}, {x: 67.5, y: 2}, {x: 90,y: 9}, {x: 112.5, y: 2}, {x: 135,y: 8}, {x: 157.5,y: 9}, {x: 180,y: 2}]}, {
        name:"b",
        data: [{x: 0,y: 2}, {x: 22.5,y: 6}, {x: 45,y: 1}, {x: 67.5,y: 9}, {x: 90,y: 9}, {x: 112.5,y: 3}, {x: 135,y: 5}, {x: 157.5,y: 3}, {x: 180,y: 7}]}, {
        name:"C",
        data: [{x: 0,y: 5}, {x: 22.5,y: 3}, {x: 45,y: 4}, {x: 67.5, y: 2}, {x: 90,y: 9}, {x: 112.5,y: 2}, {x: 135,y: 8}, {x: 157.5,y: 9}, {x: 180,y: 2}]}]

    var chart = new Highcharts.StockChart(commonOptions);
    });

    Highcharts.chart('container1', {
      chart: {
        polar: true,
        type: 'column'
      },
      xAxis: {
        min: 0,
        max: 360,
        tickInterval: 22.5,
        tickmarkPlacement: 'on',
        labels: {
          formatter: function() {
            return categories[this.value / 22.5];
          }
        }
      },
      yAxis: {
        min: 0,
        endOnTick: false,
        reversedStacks: false
      },
      plotOptions: {
        series: {
          stacking: 'normal',
          shadow: false,
          groupPadding: 0,
          pointPlacement: 'on'
        }
      },
  rangeSelector: {enabled:false},
  navigator: {enabled: false},
    scrollbar: {enabled: false},
      series: [{ name:"a",
        data: [{x: 0, y: 5}, {x: 22.5,y: 3}, {x: 45,y: 4}, {x: 67.5, y: 2}, {x: 90,y: 9}, {x: 112.5, y: 2}, {x: 135,y: 8}, {x: 157.5,y: 9}, {x: 180,y: 2}]}, {
        name:"b",
        data: [{x: 0,y: 2}, {x: 22.5,y: 6}, {x: 45,y: 1}, {x: 67.5,y: 9}, {x: 90,y: 9}, {x: 112.5,y: 3}, {x: 135,y: 5}, {x: 157.5,y: 3}, {x: 180,y: 7}]}, {
        name:"C",
        data: [{x: 0,y: 5}, {x: 22.5,y: 3}, {x: 45,y: 4}, {x: 67.5, y: 2}, {x: 90,y: 9}, {x: 112.5,y: 2}, {x: 135,y: 8}, {x: 157.5,y: 9}, {x: 180,y: 2}]}]
    });
    }
        </script>
    </head>
    <body>
        <div id="container" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>
        <div id="container1" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

```