flot bar chart xaxis label with rotated text by -90 alignment issue

Question

I am using flot library to design stacked bar graph, wherein I am using following js files.

<script src="@Url.Content("~/Scripts/charts/excanvas.js")"></script>
<script src="@Url.Content("~/Scripts/charts/jquery.flot.js")"></script>
<script src="@Url.Content("~/Scripts/charts/jquery.flot.symbol.js")"></script>

With the following script I am defining my bar chart with rotated text of xaxis label by -90 degree.

 $.each(data, function (index, item) {
                i = (index + 1) * 2;
                DataValues.push({ data: [i, item.Value], color: Color[i] });
                DataValues.push([i, item.Value]);
                TickData.push([i, item.MonthName]);
            });
            $.plot($("#CurrentYearlyTrendsBar"), [{ data: DataValues, color: "#3D69AA" }],
                    {
                        series: { bars: { show: true } },
                        bars: {
                            barWidth: 1.5,
                            align: "center"
                        },
                        xaxis: {
                            ticks: TickData,
                            axisLabelUseCanvas: true,
                            labelAngle: -90,
                        },
                        yaxis: { axisLabelUseCanvas: true },
                        grid: { hoverable: true }
                    });
            $("#CurrentYearlyTrendsBar").UseTooltip();

The problem I am having is with positioning of xaxis labels. xaxis labels are positioned to the left edge of respective bar in chart.

Please suggest me how can I center align the xaxis labels to the respective bars. Thanks in Advance...

Litotes

Can you depict your issue with image or fiddle? – Brodsky

Flot doesn't support rotated axis labels yet; what plugin are you using to do that? What version of Flot are you using? – Cranny

@captain I m unable add image in question due to min reputation restriction by stackoverflow & I havent used fiddler yet. So can you suggest me how can I attach image with the question, – Litotes

@Litotes You can link your image to some source like image hosting website.And as DNS said Flot doesn't have inbuild support for rotated axis labels yet.See if you are missing something in your question – Brodsky

@Cranny I m using Version 1.1. I am able to rotate the label text with this version, only problem is with positioning of label. It is aligned to left edge of vertical bar. – Litotes

@captain please have look at the chart here docs.google.com/file/d/0B0XPOhJetWWwaENBYlhRZ3N5U0k/… – Litotes

@Litotes thats fine but I dont see any axis label in your graph.Those are tick labels. I dont see any option labelAngle: -90 in flot API.are you sure about it? Please check my ans if it makes any sense to you. – Brodsky

There is no version 1.1 of Flot, and no labelAngle option without a plugin. You must be using a fork; where did you get it? – Cranny

Answer 1

Looking at your graph it looks like you are confused with flot terms .Those are tick labels not the axis label.You want to rotate your ticks this could be done without looking at your any other plugin by simply adding some css style

#CurrentYearlyTrendsBar div.xAxis div.tickLabel 
{    
    transform: rotate(-90deg);
    -ms-transform:rotate(-90deg); /* IE 9 */
    -moz-transform:rotate(-90deg); /* Firefox */
    -webkit-transform:rotate(-90deg); /* Safari and Chrome */
    -o-transform:rotate(-90deg); /* Opera */
    /*rotation-point:50% 50%;*/ /* CSS3 */
    /*rotation:270deg;*/ /* CSS3 */
}

You can also make use of flot-tickrotor

Brodsky

I tried using the above css, but dosent work for me. Do I need to modify the chart definition for any options? like removing axisLabelUseCanvas: true, labelAngle: -90 from definition. – Litotes

Hi, getting back to you after long time for same issue; the style definition you given is not working in IE 8 & older. What alternative I should use? – Litotes

YOu should check IE compatibility and Please use plugin (link )above. – Brodsky

Oh, yes Thank you once again. I don't remember why I stick to css styling previously. – Litotes

the problem about this CSS solution is that the text overlaps the chart, this way: fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-ash3/t1.0-9/… – Inept

@Inept Hey buddy read my answer.. I recommended to use plugin..OP does not want to go for it so I posted simple workaround – Brodsky

@Inept The margin : 3px can help ! – Shipp

Answer 2

Here's my solution for rotating x-axis tick labels.

.flot-x-axis .flot-tick-label {
    white-space: nowrap;
    transform: translate(-9px, 0) rotate(-60deg);
    text-indent: -100%;
    transform-origin: top right;
    text-align: right !important;

}

This gave me this

Contrapuntal

Problem with this is that if inside a container, the labels will be clipped, or overflow... – Labrecque

Answer 3

Here is an enhaced version of solution that I used, it avoids label truncation simply by adding height property:

.flot-x-axis .flot-tick-label
{
     white-space: nowrap;
     transform: translate(-9px, 0) rotate(-60deg);
     text-indent: -100%;
     transform-origin: top right;
     text-align: right !important;
     height: 40px !important;
}

Acaroid