Creating bubble chart in angular 5

[sushant47]

kindly provide some sample code to create bubble chart in angular 5

[xorspark]

Generally speaking, creating any chart type requires including the corresponding script files (serial.js for line/column/step/candlestick, xy.js for bubble/scatter, pie.js for pie, etc) and setting the appropriate config (the second parameter in the AmCharts.makeChart() calls), *Field properties (valueField, categoryField, xField, yField, etc, depending on the chart type) and dataProvider. The majority of our demos and knowledge base examples can be ported over to use the angular component fairly easily that way.

Using the bubble chart demo as an example, set the correct includes in your html file (note this plugin requires <script> tags):

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<!-- export/themes/etc optional -->

Then tweak the makeOptions and generateDataProvider methods from our angluar-cli example in the app.component.ts to include the chart config from the AmCharts.makeChart call and your desired dataProvider values.

Here's a stackblitz demo that puts all of this together: https://stackblitz.com/edit/amcharts3-angular-bubble-chart-demo-mzsbu8