CODEWITHSUNDEEP
javascripthtmlcanvasflot
David LaMothe
David LaMothe

Reputation: 45

Centering a flot chart relative to the chart plotted instead of the canvas size.

Hey I'm working on application that uses Flot charts fairly extensively. My manager tasked me with "centering" the charts as he does not like the way they look right now.

By default they generate with a canvas size that leaves room on the y-axis for data, and this leads to an offset where the canvas is centered leaving the chart slight offset to the right.

I know this is a nitpicky issue but I'm wondering if there's an easily implementable way to make the chart center relative to the chart itself, possibly by extending the right-side canvas to equal the left, or by making the y-axis generate in a text form leaving only the chart as a canvas.

I've tried to read through the flot API for a solution but nothing obviously jumps out at me.

Upvotes: 0

Views: 228

Answers (1)

Mark
Mark

Reputation: 108567

If I'm understanding you correctly, you are looking for the grid's margin property.

grid:{
    margin:{
       right: 17,
       top: 17
    }
}

See fiddle here.

FOR COMMENT

To set the right margin equal to the left margin dynamically, I would let flot draw the plot once, set the right margin equal to the yaxis's width and then redraw the plot:

p = $.plot( ...
p.getOptions().grid.margin.right = p.getYAxes()[0].box.width;   
p.setupGrid();
p.draw();

Updated fiddle. Run it multple times to see how it works dynamically.

Upvotes: 2

Related Questions