I am facing some issues in positioning the chart and changing the color for 
the circles inside the bubble chart. I need to draw a bubble chart wrapped 
in the angular2 component by consuming some json content. I am facing some 
issues in positioning of the chart within the specified space/region.

Please refer the snapshot for the layout of the application. In the 
application based on some user clicks event, the bubble chart should be 
loaded just below, but currently it is loading way below the page i.e. 
below the entire page layout. This bubble chart is configured with route in 
angular2 and it is expected to be loaded in the router-outlet tag 
specified, but it is loading outside that [image: enter image description 
here] <http://i.stack.imgur.com/PuKFv.png>

Note: 1. D3.js is used to draw the bubble chart which is wrapped in 
angular2 component. 2. I tried reducing the width and the height of the 
chart component, but still it is not rendered in the desired location.

[image: enter image description here] <http://i.stack.imgur.com/lAS9P.png>

HTML for the chart where it should be rendered

<div class="container" style="overflow:scroll; height:100%; width:100%;">
    <h2>Redis Administration</h2>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#ExtractorQueue" 
[routerLink]="['./']">ExtractorQueue</a></li>
        <li><a data-toggle="tab" href="#Extractor" 
[routerLink]="['Extractor']">Extractor</a></li>
        <li><a data-toggle="tab" href="#Schedule" 
[routerLink]="['Schedule']">Schedule</a></li>
        <li><a data-toggle="tab" href="#CacheVisualization" 
[routerLink]="['CacheVisualization']">Cache Visualization</a></li>
    </ul>
    <div class="tab-content">
        <router-outlet></router-outlet>
    </div></div>

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply via email to