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/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
	width	: 100%;
	height	: 500px;
}

JavaScript

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

var postData = [
    {
        startTime: startTime,
        endTime: endTime,
        entity: "atsd",
        metric: "jvm_memory_used",
        tags: {host: ["NURSWGVML007"]},
        aggregate: {
            types: ["AVG"],
            period: {count: 1, unit: "HOUR"}
        }
    }
];
var client = axibase.atsdClient("https://axibase.com");
client.series.queries(postData)
.then(function(response) {
    response[0].data[0].lineColor = "#b7e021";
    response[0].data[Math.ceil(response[0].data.length/3)].lineColor = "#535BED";
    response[0].data[Math.ceil(2*response[0].data.length/3)].lineColor = "#ED1C4D";
    var chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "theme": "none",
        "pathToImages": "https://www.amcharts.com/lib/3/images/",
        "dataProvider": response[0].data,
        "valueAxes": [{
            "position": "left",
            "title": "Memory used, Mb",
            labelFunction: function (value, valueText, valueAxis) { return Math.round(value / 1024 / 1024);}
        }],
        "graphs": [{
            "fillAlphas": 0.4,
            "valueField": "v",
            "fillColorsField": "lineColor",
        }],
        "chartScrollbar": {},
        "chartCursor": {
            "categoryBalloonDateFormat": "JJ:NN, DD MMMM",
            "cursorPosition": "mouse"
        },
        "categoryField": "d",
        "categoryAxis": {
            "minPeriod": "mm",
            "parseDates": true
        }
        
    })
    })
    .fail(function(error) {console.log(error);});