I'm encountering an issue while trying to display radar charts using amchart.js in bootstrap columns. The "amStockGraph" charts render perfectly, however, the radar charts appear blank with no errors in the console. Any advice on this matter would be greatly appreciated. Below is the provided code snippet:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>AmStockGraph Sample</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amstockchart/3.13.0/amcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amstockchart/3.13.0/serial.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amstockchart/3.13.0/amstock.js"></script>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- Anime.JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<!-- Resources Amchart-->
<script src="https://www.amcharts.com/lib/3/radar.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
...
</script>
</head>
...
function drawRadar(dataRadar) {
var chart = AmCharts.makeChart( "chartdiv", {
"type": "radar",
"theme": "light",
"dataProvider": dataRadar,
"valueAxes": [ {
"axisTitleOffset": 20,
"minimum": 0,
"axisAlpha": 0.15
} ],
"startDuration": 2,
"graphs": [ {
"balloonText": "[[value]] mmUSD of beer per year",
"bullet": "round",
"lineThickness": 2,
"valueField": "mmUSD"
} ],
"categoryField": "country",
"export": {
"enabled": false
}
} );
}
...
</script>
</body>