I'm using angular-1.5.8, d3-3.5.17, nvd3-1.8.5, and angular-nvd3-1.0.9 with Angular Material. I'm trying to put an NVD3 directive in an $mdDialog. The source code is simple:
<md-dialog aria-label="FooBar">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>FooBar/h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="dialog.close()">
<md-icon>close</md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<nvd3 options="dialog.options" data="dialog.data"></nvd3>
</md-dialog-content>
<md-dialog-actions>
<md-button ng-click="dialog.close()">
Close
</md-button>
</md-dialog-actions>
</md-dialog>
I am using $mdDialog.show() with fullscreen: true. As you know even with fullscreen: true, the dialog only goes full-screen if the browser windows is small enough.
Anyway, I'm having numerous problems with a chart of type scatterChart. Here are a couple of big ones:
- A scatter chart with 16 points shows up really, really small! I don't want to hard-code in a width/height. Is there a zoom option to NVD3 to say "show double the size you normally would"?
- If I make the browser (Chrome) small enough, the mdDialog suddenly pops to full screen! And the NVD3 chart expands dynamically to fill the full width! Pretty cool! But the height of the chart stays the same. Now I have a wide chart with a tiny height; the mdDialog close button is almost at the top of the screen, with a huge blank under it.
- If I manually set
<md-dialog-content style="min-width=500px;min-height=300px">just as an example, the same thing happens: the NVD3 charge expands horizontally to fill the width, but there is a huge blank space under the the chart, above the close button.
How do I get an NVD3 chart to play nicely with an mdDialog, and fill the entire dialog content area?
