title: Highchart spider web chart
body: <p>I've made a spider chart using highcharts but the data points have moved to the far left. I'm following this <a href="http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/polar-spider/" rel="nofollow noreferrer">example</a>. Here is my code:</p>
  
  <pre><code>&lt;div id="container2" style=" position: relative;"&gt;&lt;/div&gt;
  
  &lt;script&gt;
      $(function () {
  
          $('#container2').highcharts({
  
              chart: {
                  polar: true,
                  type: 'line',
                  margin: 0
              },
  
              exporting: {
                  enabled: false,
                  buttons: {
                      enabled: false
                  }
              },
  
              title: {
                  text: '&amp;nbsp',
                  x: -80,
                  useHTML: true
              },
  
              pane: {
                  size: '70%'
              },
  
              xAxis: {
                  categories: ['Math', 'Comp. Sci', 'Science', 'Social Sci.', 'English', 'Hindi'],
                  tickmarkPlacement: 'on',
                  lineWidth: 0,
                  labels: {
                      align: 'center',
                      distance: 43
                  }
              },
  
              yAxis: {
                  gridLineInterpolation: 'polygon',
                  lineWidth: 0,
                  min: 0,
                  endOnTick: true,
                  showLastLabel: true,
                  tickPositions: [0.2, 0.4, 0.6, 0.8, 1.0]
              },
  
              tooltip: {
                  shared: true,
                  headerFormat: '&lt;span style="font-size: 12px"&gt;{point.key}:&lt;/span&gt;&amp;nbsp;&amp;nbsp;&lt;b&gt;{point.y:,.2f}&lt;/b&gt;',
                  pointFormat: '',
                  useHTML: true
              },
  
              legend: {
                  enabled: true,
                  align: 'right',
                  verticalAlign: 'top',
                  y: 30,
                  layout: 'vertical'
              },
  
              series: [{
                  name: 'Grade Distribution',
                  data: [.8, .95, .7, .35, .6, .3],
                  pointPlacement: 'on',
                  color: 'black',
                  fillOpacity: 0.2
              }]
  
          });
      });
  </code></pre>
  
  <p>I looked for an interfering css in my code, but didn't find anything. Any idea what could be causing this?</p>
  
  <p><a href="https://i.stack.imgur.com/SSYUc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SSYUc.png" alt="enter image description here"></a></p>