Question

45

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

rated 0 times [ 51] [ 6] / answers: 1 / hits: 22073 / 11 Years ago, thu, september 5, 2013, 12:00:00

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

<script [email protected](~/Scripts/charts/excanvas.js)></script>

<script [email protected](~/Scripts/charts/jquery.flot.js)></script>

<script [email protected](~/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...

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

arthur

Add To Favorites

Follow

Total Points: 729

Total Questions: 107

Total Answers: 109

Location: China

Member since Mon, Aug 22, 2022

2 Years ago

answered 11 Years ago jadyngraysons · Accepted Answer

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