krispo/angular-nvd3

Strange behavior using IE browser

kavitama opened this issue · 4 comments

kavitama commented

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?
screenshot048
screenshot047
screenshot049

EvilDrW commented

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 commented

image
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 commented

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 commented

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)