CODEWITHSUNDEEP
javascriptlegendnvd3.js
user1234
user1234

Reputation: 3159

how to change the position of the legend-nvd3 graphs

How can I change the position of the legend, where the legend being on the right most side, I can make it move to the left most side? I tried to do some changes in the nvd3.js code, but that hasn't worked for me at all!. I'm sure how and where can i add attributes to change the position?

Just for info, here is the legend (Key Usage', 'block Usage','other usage') whose position im trying to change:

enter image description here Any ideasss? Thanks!

Upvotes: 0

Views: 2214

Answers (2)

Smita Busar
Smita Busar

Reputation: 21

Absolutely right about the rightAlign Property and good news is we can set it in the addGraph function as follows:

chart.legend.rightAlign(false);

Upvotes: 2

huan feng
huan feng

Reputation: 8623

From the source code comment line 5005 in nv.d3.js:

//position legend as far right as possible within the total width
if (rightAlign) {
   g.attr('transform', 'translate(' + (width - margin.right - legendWidth) + ',' + margin.top + ')');
}
else {
   g.attr('transform', 'translate(0' + ',' + margin.top + ')');
}

So I guess you can not positioning the legend to left side:)

The code is designed to put the legend as far right as possible, it also contains some wrapping logic, once the length of legends in one line reach some max limit(like reach the chart's width), it will separate into two lines in well format.

Hope it helps!

Upvotes: 1

Related Questions