My spider chart created with highcharts is displaying the data points on the far left side. I'm using this example as a reference. Below is my code snippet:
<div id="container2" style=" position: relative;"></div>
<script>
$(function () {
$('#container2').highcharts({
chart: {
polar: true,
type: 'line',
margin: 0
},
exporting: {
enabled: false,
buttons: {
enabled: false
}
},
title: {
text: ' ',
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: '<span style="font-size: 12px">{point.key}:</span> <b>{point.y:,.2f}</b>',
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
}]
});
});
I've checked for any CSS interference in my code, but couldn't find anything. Any thoughts on what might be causing this alignment issue?