Y-axis tick labels of horizontal graphs are misaligned #1010

ilfrich opened this Issue Apr 2, 2013 · 6 comments


None yet
2 participants

ilfrich commented Apr 2, 2013

If I create a chart that has horizontal bars and add category captions (strings) to the Y-Axis the captions are misaligned depending on how long the string is. Creating some CSS to use different fonts didn't help either. The only way to get them aligned properly was by changing the font size to something ridiculously small.

The absolute positioning and the calculated distance from the left border seems to be responsible for that.

Tested with Opera 12.14, Firefox 19.02 and IE 10.

ilfrich commented Apr 2, 2013

Here the code for easier reproducibility (uses jquery.flot, jquery.flot.categories):

<div id="OrderStatus" style="width:600px;height:300px" class="dashboad_item_graph"></div>
<script type="text/javascript">;
var seriesData = [];
seriesData.push([0, "not deliverable"]);
seriesData.push([0, "pending"]);
seriesData.push([0, "canceled and exported"]);
seriesData.push([4, "in progress"]);
seriesData.push([0, "created"]);
seriesData.push([1, "returned"]);
seriesData.push([0, "rejected"]);
seriesData.push([2, "new"]);
seriesData.push([0, "open"]);
seriesData.push([2, "delivered"]);
seriesData.push([1, "canceled"]);
seriesData.push([0, "completed"]);

$.plot($("#OrderStatus"), [
data: seriesData,
bars: { 
horizontal: true,
show: true,
align: "center", 
barWidth: 0.7 
color: "#FF9900"
yaxis: {
mode: "categories",
xaxis: {
max: 15

dnschnur commented Apr 2, 2013

Is this with 0.8.0-beta, or an earlier alpha of 0.8?

ilfrich commented Apr 2, 2013

I've originally downloaded the release 0.7 from the website. I had to get the categories plug-in from the referenced JS on the examples page (http://www.flotcharts.org/flot/examples/) since it wasn't part of the release (which felt inconsistent, since the examples use it) and later had to update the core as well, because the 0.7 of course wouldn't work with categories. According to the source file on the example page it is 0.8.0-beta (can't look it up right now because of no access to the server right now).


dnschnur commented Apr 2, 2013

Categories is part of the 0.8 release; we included it on the examples page because it had been available for a while, even if not in the stable release, and a lot of people have asked about it.

I tested using your example, but can't reproduce the problem. We only went to beta a few weeks ago, and there were several changes in that time period that directly impact text rendering. So if you downloaded the file earlier, then you probably still have the alpha. Can you try updating to the latest and see if the problem is fixed?

ilfrich commented Apr 3, 2013

David, thanks for your help. I finally got it working. Seems like I've had some server-side caching issues. So even after updating the JS files it still used the old ones (0.7). With the latest version however it works.

ilfrich closed this Apr 3, 2013


dnschnur commented Apr 3, 2013


dnschnur was assigned Apr 3, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment