flot bar chart with long labels rendering issue

Question

i plotted a flot bar chat with long labels, and it came out ugly, i saw that it is possible to display the labels rotated like 90 degrees, but i tried with the following code without success. the javascript am using is

function onSuccess(series) {
            var tickLabels = [];
            var pieData= [];
            for (var i =0;i<series.length;i++){
                tickLabels.push([i,series[i][0]]);
            }
            var data = [series];
        var barArea = $("#barChart");  

        barArea.css("height", "400px");  
        barArea.css("width", "600px"); 


            $.plot( $("#barChart"), data, {
        series: {
         bars: {
            show:true,
            barWidth: 0.5,
            align: "center"
         },
            points: {
                show: true
            }
        },
        grid: {
            hoverable: true,
            clickable: true
        },
        xaxis: {
            labelWidth:12,
            labelAngle: 45,
            ticks: tickLabels
        }
        } );

The chart

does anyone know of any solution to this.

Edit

Is it possible to use legend in the bar chart and then pllace the legend below the bar char like this or this ?

Answer 1

Flot doesn't support yet the labelAngle option. There are several proposals on the Flot issue tracker but none of them yet accepted.

i saw that it is possible to display the labels rotated like 90 degrees

What you saw (link please?) seems to be a forked version of Flot, like this one, which does support the labelAngle option.

Answer 2

You can use the Flot Tickrotor plugin. I'm not sure whether it still works with 0.7, though; it was recently updated to work with 0.8, and that might have broken backwards-compatibility.

We're right now working to integrate the plugin's functionality into 0.9.

I should point out that simply rotating the text will still look pretty weird; you can't avoid that without shortening the labels.