CODEWITHSUNDEEP
javascriptjquerycssflot
David Vincent
David Vincent

Reputation: 644

Flot - How to make yaxis label position in the middle of the horizontal bar chart?

I have a Flot bar chart with negative and positive values, so that I can make the chart look like a tornado chart (some tricky way), and then the problem is, I can't set the yaxis label position to the middle of the chart.

Here is the example code of my code : http://fiddle.jshell.net/ha2egeuk/31/

enter image description here

Here is the simple code I use for make it on the center:

.flot-y-axis  > .tickLabel{
  left: 277px !important;
}

The problem is, I set it static. How to make it auto center?

Upvotes: 1

Views: 1766

Answers (3)

Web Dev
Web Dev

Reputation: 1

In my case I had just a canvas, no extra css classes to work with.

Solved it with:

yaxis: {
  tickLength: 10,
  tickColor: '#fff'
}

Upvotes: 0

Raidri
Raidri

Reputation: 17550

To center the y-axis labels inside the canvas, you can use something like this:

.flot-y-axis  > .tickLabel{
    left: calc(50% - 50px) !important;
    text-align: center !important;
    width: 100px; // set to a size large enought for all labels ans use half of this in the calculation for the left option
}

Here an updated fiddle with the above styles: http://fiddle.jshell.net/ha2egeuk/32/

The problem in that fiddle is that the chart is not using the full width of the canvas (which starts at the left side of the window unlike the chart itself). So the labels are centered inside the canvas but not in the chart.

I haven't found the cause of this discrepancy. But when you have a chart which fills the full canvas the above solution will work.

Upvotes: 1

Hitesh
Hitesh

Reputation: 372

Try this CSS.

.flot-y-axis  > .tickLabel { left:45% !important; }

Upvotes: 1

Related Questions