JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://axibase.com/atsd/atsdClient.bundle.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/none.js"></script>

<!-- first chart group -->

NURSWGVML007
<div class="chart-block" style="padding:28px">
    mem:
    <div id="line1" style="vertical-align: middle; display: inline-block; width: 150px; height: 60px;"></div>cpu:
    <div id="column1" style="vertical-align: middle;display: inline-block; width: 150px; height: 60px;"></div>
</div>

<!-- second chart group -->
<div class="chart-block" style="padding:28px">
    mem:
    <div id="line2" style="vertical-align: middle; display: inline-block; width: 150px; height: 60px;"></div>cpu:
    <div id="column2" style="vertical-align: middle;display: inline-block; width: 150px; height: 60px;"></div>
</div>

<!-- third chart group -->
<div class="chart-block" style="padding:28px">
    mem:
    <div id="thermometer1" style="vertical-align: middle; display: inline-block; width: 150px; height: 50px;"></div>
    cpu:
    <div id="thermometer2" style="vertical-align: middle;display: inline-block; width: 150px; height: 50px"></div>
</div>

<!-- fourth chart group -->
<div class="chart-block" style="padding:28px">
    mem:
    <div id="percent1" style="vertical-align: middle; display: inline-block; width: 150px; height: 50px;"></div>
    cpu:
    <div id="percent2" style="vertical-align: middle;display: inline-block; width: 150px; height: 50px;"></div>
</div>

<!-- fifth chart group -->
<div class="chart-block" style="padding:28px">
    mem:
    <div id="pie1" style="vertical-align: middle; display: inline-block; width: 52px; height: 50px;"></div>
    cpu:
    <div id="pie2" style="vertical-align: middle; display: inline-block; width: 52px; height: 50px;"></div>
</div>

JavaScript

var startTime = Date.now() - 24 * 3600 * 1000,
    endTime = Date.now();

var postData = [{
    startTime: startTime,
    endTime: endTime,
    entity: "atsd",
    metric: "jvm_memory_used_percent",
    timeFormat: "milliseconds",
    tags: {
        host: ["NURSWGVML007"]
    },

    aggregate: {
        types: ["AVG"],
        period: {
            count: 1,
            unit: "HOUR"
        }
    }
}, {
    startTime: startTime,
    endTime: endTime,
    entity: "NURSWGVML007",
    metric: "cpu_busy",
    timeFormat: "milliseconds",
    aggregate: {
        types: ["AVG"],
        period: {
            count: 1,
            unit: "HOUR"
        }
    }
}];

var client = axibase.atsdClient("https://axibase.com");
client.series.queries(postData)
    .then(function(response) {
        // line chart, with a bullet at the end
        var memSeries, cpuSeries;
        for (var i = 0; i < response.length; ++i) {
            if (response[i].metric === "jvm_memory_used_percent") {
                memSeries = response[i].data;
            } else if (response[i].metric === "cpu_busy") {
                cpuSeries = response[i].data;
            } else {
                throw new Error("Error! Bad type found!!!");
            }
        }


        var chart = new AmCharts.AmSerialChart(AmCharts.themes.none);
        chart.dataProvider = memSeries;
        chart.categoryField = "t";
        chart.autoMargins = false;
        chart.marginLeft = 0;
        chart.marginRight = 5;
        chart.marginTop = 0;
        chart.marginBottom = 0;

        var graph = new AmCharts.AmGraph();
        graph.valueField = "v";
        graph.bulletField = "bullet";
        graph.showBalloon = false;
        graph.lineColor = "#a9ec49";
        chart.addGraph(graph);

        var valueAxis = new AmCharts.ValueAxis();
        valueAxis.gridAlpha = 0;
        valueAxis.axisAlpha = 0;
        chart.addValueAxis(valueAxis);

        var categoryAxis = chart.categoryAxis;
       ...