Strange behavior using IE browser

[kavitama]

While being able to show graphs without any specific issue on Opera, Firefox, Chrome, Safari when the same code is executed on Internet Explorer Browser the graph has missing parts (CSS problem?) like in the example attached.
Any hint on where the issue could come from?

[EvilDrW]

I looked into this and it seems to be a CSS problem, yes. When I manually edit the container of the charts and change it from (for example):

<svg class="nvd3-svg" width="100%" height="450">

to:

<svg class="nvd3-svg" style="width:100%; height:450px">

then it renders correctly. I guess I would recommend using the style attribute rather than width/height attributes? note that this is the same problem as #200 experiences

[kavitama]

Not sure if it is the same but your proposal would be to change where the height is given ?
In the <nvd3-multi-bar-chart> ???

[EvilDrW]

Yes, I was able to solve this by changing at angular-nvd3.js#L170 to

d3.select(element[0]).append('svg')
   .style({height: scope.options.chart.height+'px', width: scope.options.chart.width || '100%'})
   .datum(data)
   .transition().duration(scope.options.chart.transitionDuration)
   .call(scope.chart);

I'll submit a PR this evening when I'm not on a hobbled work pc.

[krispo]

Thanks guys for your investigation into this. I also added some fixes into your PR. The issue will be fixed in the new release (1.0.3)