CODEWITHSUNDEEP
jqueryflot
John Mac
John Mac

Reputation: 2550

how to size and align flot graphs

By default flot sizes the graph and axis labels to fix inside the div container. If you have a series of graphs on a page, with different variables in each graph, the sizes of the axis labels is different and the graph canvases are therefore different sizes and don't align neatly.

Is there a way to set the size and position of the flot canvas so that the graphs are a fixed size and position within the containers

Upvotes: 4

Views: 3115

Answers (1)

Ryley
Ryley

Reputation: 21226

Not exactly, no. What you can do is specify how wide/high the axis labels should be, which will force the canvases to line up between different graphs.

From the API.txt:

"labelWidth" and "labelHeight" specifies a fixed size of the tick labels in pixels. They're useful in case you need to align several plots. "reserveSpace" means that even if an axis isn't shown, Flot should reserve space for it - it is useful in combination with labelWidth and labelHeight for aligning multi-axis charts.

Beyond that, if you wanted the actual axes to be the same between graphs, you would need to establish what the global min/max is for each axis between all your data sets, and then specify that for each axis in each graph.

Upvotes: 7

Related Questions