Testing space between labels of a polar chart and the chart itself
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
var data = [{
name: "Label 1",
y: 10,
color: "#9fe642"
}, {
name: "Long Label Line",
y: 10,
color: "#274ffb"
}, {
name: "Label 3",
y: 10,
color: "#705ba4"
}, {
name: "Four Word Line Label",
y: 10,
color: "#a54593"
}, {
name: "Label 5",
y: 5,
color: "#d1d700"
}, {
name: "Label 6",
y: 10,
color: "#06675e"
}, {
name: "Label 7",
y: 10,
color: "#30ff8c"
}, {
name: "Label 8",
y: 10,
color: "#443c5c"
}
]
var borderWidth = 4;
$('#container').highcharts({
chart: {
polar: true,
backgroundColor: 'transparent',
plotBorderWidth: null,
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title:{
text:''
},
subTitle:{
text:''
},
pane: {
startAngle: 0,
endAngle: 360
},
legend: {
enabled: false
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
},
yAxis: {
min: 0,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
plotBands: [ { from: 8, to: 15, color: '#FFFFFF', zIndex: 5 } ]
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45,
pointPlacement: 'between',
states: {
hover: {
enabled: true
...