JSFiddle - React, Tailwind, and code Playground

by amcharts

HTML

<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script src="amcharts/xy.js" type="text/javascript"></script>
<script src="amcharts/pie.js" type="text/javascript"></script>
<script src="amcharts/gauge.js" type="text/javascript"></script>
<script src="amcharts/funnel.js" type="text/javascript"></script>

JavaScript

var lineChart;
var chartData = [];
var chartCursor;
var xAxis;
var yAxis;
var arrow;
var axisKM;

AmCharts.ready(function () {
    lineChart();
});

function lineChart(){
    // SERIAL CHART    
    lineChart = new AmCharts.AmSerialChart();
    lineChart.pathToImages = "amcharts/images/";
    lineChart.dataProvider = chartData;
    lineChart.autoMargins = false;
    lineChart.marginTop = 6;
    lineChart.marginLeft = 6;
    lineChart.marginRight = 6;
    lineChart.marginBottom = 25;
    lineChart.categoryField = "date";

    // listen for "dataUpdated" event (fired when chart is rendered) and call zoomChart method when it happens
    lineChart.addListener("dataUpdated", zoomChart);

    // AXES
    // category
    var categoryAxis = lineChart.categoryAxis;
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
    categoryAxis.dashLength = 3;
    categoryAxis.minorGridEnabled = true;
    categoryAxis.axisColor = "#DADADA";

    // value                
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.axisAlpha = 0.2;
    valueAxis.dashLength = 3;
    valueAxis.inside = true;
    lineChart.addValueAxis(valueAxis);

    // GRAPH
    var graph = new AmCharts.AmGraph();
    graph.title = "red line";
    graph.valueField = "visits";
    graph.bullet = "round";
    graph.bulletBorderColor = "#FFFFFF";
    graph.bulletBorderThickness = 2;
    graph.bulletBorderAlpha = 1;
    graph.lineThickness = 2;
    graph.lineColor = "#b72c34";
    graph.negativeLineColor = "#80a8d9";
    graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>";
    graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
    lineChart.addGraph(graph);

    // CURSOR
    var chartCursor = new AmCharts.ChartCursor();
    chartCursor.cursorPosition = "mouse";
   ...