https://i.sstatic.net/2wP6g.pngI am encountering difficulty with loading the bubble chart in the desired colors. The proof of concept (POC) works fine, but once integrated into the actual application, the color changes due to another Bootstrap CSS class overriding the specified settings. The index.html includes references to Bootstrap as follows:
<!-- Bootstrap and JQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
In the Plunker POC, the circles are displayed in white which is the desired outcome. However, when viewed in the application, they appear black. How can I override this and make it work correctly?
The code for the Angular 2 component responsible for generating the bubble chart can be found at the provided Plunker link.