Is there a way to adjust the height of only the xAxis label area on a 3D column chart using Highcharts? I've come across some solutions in various threads, but none seem to work as expected. Can anyone help me identify what might be causing this issue?
$(document).ready(function() {
var options = {
// basic chart options
chart: {
height: 350,
renderTo: 'container',
type: 'column',
marginRight: 130,
lang: {
thousandsSep: ','
},
marginBottom: 25,
// 3D initialization, comment out for non-3D columns
options3d: {
enabled: true,
alpha: 0,
beta: 2,
depth: 50,
viewDistance: 25
}
},
// main chart title (TOP)
title: {
style: {
fontWeight: 'bold'
},
text: 'Spender Industry',
x: -20 //center
},
// main chart sub-title (TOP)
subtitle: {
style: {
fontWeight: 'bold'
},
text: 'Totals',
x: -20
},
// xAxis title
xAxis: {
reversed: false,
title: {
text: 'Party'
},
labels: {
height: 200,
style: {
lineHeight: '14px',
fontWeight: 'bold',
staggerLines: 1
}
}
},
// yAxis title
yAxis: {
title: {
text: 'Dollar Amount',
style: {
fontWeight: 'bold'
}
},
// chart options for each plotted point
plotLines: [{
value: 1,
width: 1,
color: '#66837B'
}]
},
// tooltip on hover options
tooltip: {
lang: {
thousandsSep: ','
},
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ '$' + Highcharts.numberFormat(this.y, 0);
}
},
legend: {
layout: 'horizontal',
align: 'left',
verticalAlign: 'top',
x: 0,
y: 0,
borderWidth: 0,
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
distance: -100,
color: '#FFFFFF',
}
},
series: {
text: 'Total Dollar Amount',
color: '#66837B',
cursor: 'pointer',
connectNulls: true,
pointWidth: 70
},
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || '#000000',
formatter: function () {
return '$' + Highcharts.numberFormat(this.y,0);
}
},
lang: {
thousandsSep: ','
}
}
},
series: []
}
});
Click here to see an example image showing the issue of overflowing labels on the xAxis.