CODEWITHSUNDEEP
javascriptjquerynvd3.js
user1234
user1234

Reputation: 3159

How to add a gap between the nvd3 legend and the chart

I'm aware that this question might have be asked before, and as i tried looking to get the answer for this issue, i haven't really found one. Similar to the fiddle here: http://jsfiddle.net/rdesai/vfe2B/51/, im trying to add gap between legend and chart by doing:

  graph.select(".nv-wrap.nv-legendWrap nv-legend nv-series").attr("transform", "translate(100,75)").style('padding','200px');
  graph.select(".nv-wrap.nv-lineChart").attr("transform", "translate(100,75)");

With this approach im able to move the position of the chart, however when i click on one of the legend( turn on/off circle), the chart goes back to its original position. i also tried:

chart = nv.models.lineChart().options({
                width: 1050
            }).margin({top: 0, right:30, left:80, bottom: 150});

but no luck.. any ideas on how this one can be solved?? Thanks!

Upvotes: 1

Views: 4133

Answers (1)

huan feng
huan feng

Reputation: 8633

You should try like below:

chart = nv.models.lineChart()
chart.legend.margin({top: 0, right:30, left:80, bottom: 150});

Updated your fiddle

Hope it helps:)

Upvotes: 5

Related Questions