CODEWITHSUNDEEP
cssd3.jschartsnvd3.js
poshak
poshak

Reputation: 105

nvd3 discrete bar chart doesnot take entire svg area

I am having this problem with Vertical bar chart using nvd3 where the chart which I add to the svg is not taking the entire area of svg, hence not a aligning properly. the picture below you can see that in the box 5 the chart is taking only the right most area and not taking up the entire box.

Can someone help on how i can fix this? I have been on this for hours and have not found anything useful online.

TIA

enter image description here

Upvotes: 1

Views: 683

Answers (3)

poshak
poshak

Reputation: 105

After trying a lot of hacks, I figured out the reason the chart was not aligning in svg properly was because of hard coded values for margin of the chart in the nv.d3.js library itself.

enter image description here

Changing the margin values in line 3208 helped me fit the chart properly.

Upvotes: 1

jprince
jprince

Reputation: 181

It's probably too late to help you with this issue, but I'll take a crack at it for the next person who comes along. I haven't tested this for the discrete bar chart, but I know that it works for the pie chart.

Set the chart's margin to a negative value - .margin({top: -20, right: -20, bottom: -20, left: -20})

My results:

Before

Before

After

After

Slightly off center... but you get the gist of it.

Upvotes: 2

SK2017
SK2017

Reputation: 773

Taking in to account you haven't specified any code I'm going to take a guess how to fix your problem....

If your calling your chart like this in html 

     <div id="chart1">
            <svg></svg>
     </div>

Make sure you have CSS like this - 

#chart1 {
height: 600px;
width: 600px;
float: left;
margin-top: 60px;
padding-bottom: 0px;
}

Or if you want to set the width and height in the javascript, edit your code to look like like this - 

nv.addGraph(function() {
  var chart = nv.models.discreteBarChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value })
    .staggerLabels(true)
    .tooltips(false)
    .showValues(true)
    .options({ height: 600,
     width: 600,
     });

Hope this helps

Upvotes: 1

Related Questions