please find the plunker at http://plnkr.co/edit/119EaqzLCwimipYldezW?p=preview
Initially the charts are nicely aligned as 2x2 in the page. But when I recompile the template in onclickCreate() function, the CSS is not applying to the compiled template, so all charts are appearing in one line and thus messed up. Can any one help me to fix the code so that I can get the 2x2 alignment even after compilation in onclickCreate() function.
In the template compilation I have even given the class 'col' too but nothing get effected.
var template = ' <div class="col"> <nvd3 id = "chart1" options="options" data="data"></nvd3> </div><div class="col"> '
+ ' <div class="col"> <nvd3 id = "chart2" options="options" data="data"></nvd3> </div><div class="col"> '
+ ' <div class="col"> <nvd3 id = "chart3" options="options" data="data"></nvd3> </div><div class="col"> '
+ ' <div class="col"> <nvd3 id = "chart4" options="options" data="data"></nvd3> </div><div class="col"> ';
