CODEWITHSUNDEEP
javascriptjqueryflotbar-chart
Smith
Smith

Reputation: 5961

flot bar chart with long labels rendering issue

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

enter image description here

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 ?

Upvotes: 0

Views: 3111

Answers (2)

DNS
DNS

Reputation: 38189

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.

Upvotes: 2

Grigur
Grigur

Reputation: 465

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.

Upvotes: 2

Related Questions