JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<div id="mydia" class="diagram"></div>
<div id="mydia2" class="diagram"></div>
CSS
.diagram {
width: 45%;
height: 300px;
display: inline-block;
}
JavaScript
data = [{
"ax": "1",
"ay": "2"
}, {
"ax": "3",
"ay": "4"
}, {
"ax": "5",
"ay": "6"
}];
var chart = AmCharts.makeChart("mydia", {
"type": "xy",
"dataProvider": data,
"valueAxes": [{
"id": "v1",
"position": "left"
}, {
"id": "v2",
"position": "right"
}, {
"id": "v3",
"position": "bottom",
"title": "Some text"
}],
"graphs": [{
"balloonText": "x:[[x]] y:[[y]]",
"xField": "ax",
"yField": "ay",
}, {
"balloonText": "x:[[x]] y:[[y]]",
"xField": "bx",
"yField": "by",
}],
});
var chart = AmCharts.makeChart("mydia2", {
"type": "xy",
"dataProvider": data,
"valueAxes": [{
"id": "v1",
"position": "left"
}, {
"id": "v2",
"position": "right"
}, {
"id": "v3",
"position": "bottom",
"labelsEnabled": false,
}],
"graphs": [{
"xField": "ax",
"yField": "ay",
}, {
"xField": "bx",
"yField": "by",
}],
});