Highchart label rotation makes my column dissappear

Question

I have a highchart column chart with labels rotated to -45 degree. I want to rotate the labels to -90 degree, but doing so makes my bars disappear! fiddle: http://jsfiddle.net/Snowbell92/LMEve/ (this one has labels rotated to -90 deg). and code:

$(function () {
    $('#closingvolumechart').highcharts({
        chart: {
            type: 'column',

        },
        title: {
            text: 'Fuel & Power Industry'
        },
        xAxis: {
            categories: ["EXIM BANK 1ST MUTUAL FUND","NLI FIRST MUTUAL FUND","AIBL 1ST ISLAMIC MUTUAL FUND","6TH ICB M.F.","GRAMEEN MUTUAL FUND ONE","AB BANK 1ST MUTUAL FUND","NCCBL MUTUAL FUND-1","ICB AMCL SECOND MUTUAL FUND","5TH ICB M.F.","TRUST BANK 1ST MUTUAL FUND","FIRST BANGLADESH FIXED INCOME FUND","IFIC BANK 1ST MUTUAL FUND","4TH ICB M.F.","7TH ICB M.F.","POPULAR LIFE FIRST MUTUAL FUND","LR GLOBAL BANGLADESH MUTUAL FUND ONE","ICB AMCL THIRD NRB MUTUAL FUND","FIRST JANATA BANK MUTUAL FUND","AIMS 1ST M.F.","DBH FIRST MUTUAL FUND","GRAMEEN ONE : SCHEME TWO","RELIANCE ONE THE 1ST SCHEME OF RELIANCE INSURANCE MUTUAL FUN","IFIL ISLAMIC MUTUAL FUND-1","ICB AMCL 1ST NRB MUTUAL FUND","PHP FIRST MUTUAL FUND","PRIME BANK 1ST ICB AMCL MUTUAL FUND","2ND ICB M.F.","ICB AMCL ISLAMIC MUTUAL FUND","8TH ICB M.F.","1ST ICB M.F.","ICB AMCL SONALI BANK LIMITED 1ST MUTUAL FUND","SOUTHEAST BANK 1ST MUTUAL FUND","PRIME FINANCE FIRST MUTUAL FUND","EBL FIRST MUTUAL FUND","EBL NRB MUTUAL FUND","3RD ICB M.F.","ICB EMPLOYEES PROVIDENT MF 1: SCHEME 1","MBL 1ST MUTUAL FUND","GREEN DELTA MUTUAL FUND","PHOENIX FINANCE 1ST MUTUAL FUND","ICB AMCL 2ND NRB MUTUAL FUND"],
            labels: {
                rotation: -90,
                align: 'right',
                style: {
                    fontSize: '10px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        plotOptions: {
        series: {
                    minPointLength: 8,
            borderColor: '#f2f2f2',
            borderWidth: 2,
            shadow: true,
        }
    },
    credits: {
            enabled: false
},
        yAxis: {
            min: 0,
            title: {
                text: 'Volume'
            }
        },
        legend: {
            enabled: false
        },
        column: { dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    verticalAlign: 'top'

                }

            },
        series: [{
            name: 'Volume',
            data: [530,536,539,573,574,591,597,614,614,631,633,681,706,708,719,751,752,755,758,771,782,838,857,870,876,877,897,905,929,934,941,957,990,996,999,1005,1023,1023,1029,1052,1059],
            color: '#008000',
        }]
    });
});

Also, I don't know if this is a separate issue, but implementing the chart inside a tab (I am using twitter bootstrap tabs) doesn't make the chart 100% wide. only if I activate firebug, then the chart expands. url: http://goo.gl/X3sNVq , see the tab "show stock price in graph" then "close price" (the active tab). the chart is the same one as the above. I really appreciate any help. Thanks in advance.

Answer 1

You just have to increase the height of the chart. Since your x axis labels are lengthy the chart cannot draw the bar charts. i have increased the height as 600px.

<div id="closingvolumechart" style="height: 600px"></div>

See demo here