CODEWITHSUNDEEP
javascriptcssd3.jsnvd3.js
Rahul Desai
Rahul Desai

Reputation: 15481

Add some gap in between legend and the chart

In my fiddle here, I want to add some gap in between the legends at the top and the chart, so as to look better.

I tried:

d3.select(".nv-linesWrap").style("padding-top","50px");

but it didnt work.

How do I fix this?

jsFiddle

Upvotes: 3

Views: 1977

Answers (2)

Flopo
Flopo

Reputation: 58

take a look at xTicks attributes in line 102.

.attr('transform', function(d,i,j) { return 'translate (-10, 40) rotate(-90 0,0)' });

There you can translate and rotate your scalevalues.

In your case, just raise the value of the second translate paramater (40->60).

And a tipp: play around with those attributes, the first rotateparameter to "-45" makes it really better to read, so you dont have to turn your head every time ;)

//EDIT (Wrong solution)

the legendwrap has the same function and an equal behaviour of the translate function. Just insert following in line 110:

 d3.select(".nv-legendWrap")
        .style("float", "right")
        .attr("transform", "translate(0,-75)");

Maybe you now have to resize your whole SVG Container where the whole chart is placed

//EDIT2 (Improvement)

to resize the whole Chart (or margin-top+25) i used the following way: just put this part after your legendWrap.

     d3.select(".nv-wrap.nv-lineChart").attr("transform", "translate(100,75)");

Upvotes: 2

prashant
prashant

Reputation: 1815

You can control the distance of the chart legend from chart as follows:

chart.legend.margin({
    top: 0,
    bottom: 10,
    left: 0,
    right: 0
});

Please modify the top / bottom values as required.

Note that by default nvd3 uses following values: {top: 5, right: 0, bottom: 5, left: 0}

For introducing space between individual legends there is no direct way as this is not controlled by CSS property and is hard-coded within nvd3 itself.

In nvd3 legend.js line 120:

seriesWidths.push(nodeTextLength + 128); // 28 is ~ the width of the circle plus some padding

You can increase this 28 value to increase space between legends.

Upvotes: 0

Related Questions