Conflict of IonicModal with AngularNVD3 (based on D3)

Question

I'm using nvd3 in my Ionic App. There is a scenario in which I face an issue i.e. I've a PieChart on one tab and IonicModal on another tab. Once I open the IonicModal, and after that when I come on the PieChart Tab, the chart becomes so small. Looks so strange to me, because if the IonicModal is on the same tab, and the pieChart is visible, so Modal will not affect the pieChart, but if pieChart is hidden and I open the Modal, so the chart again becomes so small (Design is disturbed)...

Here is in an image

Here is compact version

Here is the compact one. Any Help would be appreciated.

Answer 1

Hi Guys I solved this issue by changing width="100%" to width="100vw" in angular nvd3 directive.

like this line:

scope.svg.attr('width', '100%').style({width: '100%'});

changed to:

scope.svg.attr('width', '100%').style({width: '100vw'});

I used the following SO link which helps you to know the difference between 100% and 100vw:

Difference between Width:100% and width:100vw?

Answer 2

You can try to use extended: true in the config attribute:

<nvd3 options="options" config="{extended: true}" data="data"></nvd3>

Here is a Plunker: http://plnkr.co/edit/WQq6e5?p=preview

The IonicModal can be opened both in the Dash tab and in the Account tab.

If you remove the config attribute magically the issue you noticed happens...