How to change height of ENTIRE xAxis labels using Highcharts?

Question

How do i change the height of only the xAxis label area on a 3D column chart using Highcharts? I found a few threads that claimed to do this but did not actually do it. Please let me know what is wrong...

   $(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 ''+ this.series.name +'
'+
                                        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: []

                        }
                    });

Here is an example (img) of the labels not showing and overflowing on the xAxis.

Paweł Fus · Accepted Answer

This is caused by this line:

 marginBottom: 25,

You have fixed bottom margin - remove that, or simply increase that value.

How to change height of ENTIRE xAxis labels using Highcharts?

Answers (2)

Related Questions