David Vincent David Vincent - 1 year ago 157
CSS Question

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?

Answer Source

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.