JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv"></div>
<div id="legenddiv"></div>

<table class="table" id="dataTable">
  <tr class="year">
    <td></td>
    <th>2010</th>
    <th>2011</th>
    <th>2012</th>
    <th>2013</th>
    <th>2014</th>
    <th>2015</th>
  </tr>
  <tr class="row1">
    <th class="row-title">Row 1</th>
    <td>40355</td>
    <td>39544</td>
    <td>30280</td>
    <td>37123</td>
    <td>39129</td>
    <td>41234</td>
  </tr>
  <tr class="row2">
    <th class="row-title">Row 2</th>
    <td>12760</td>
    <td>17700</td>
    <td>19000</td>
    <td>15023</td>
    <td>19234</td>
    <td>17230</td>
  </tr>
  <tr class="row3">
    <th class="row-title">Row 3</th>
    <td>7326</td>
    <td>7386</td>
    <td>8000</td>
    <td>7504</td>
    <td>8120</td>
    <td>9102</td>
  </tr>
</table>


<br />
<br />
<a href="#" class="ganti"><strong>Add new row</strong></a>
<br />
<br />
<br />
<br />

CSS

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

#legenddiv {
  margin: 5px 0 20px 0;
  position: relative;
}

JavaScript

// This is just the amChart code

var chart;

var chartData = [];

function setupChart() {
  // first we generate some random data
  generateChartData();

  // SERIAL CHART
  chart = new AmCharts.AmSerialChart();
  chart.dataProvider = chartData;
  chart.categoryField = "year";
  chart.startDuration = 0.2;
  chart.startEffect = "easeOutSine";
  chart.startAlpha = 0;
  chart.balloon.color = "#000000";

  chart.marginBottom = 10;
  chart.marginLeft = 0;
  chart.marginRight = 0;
  chart.marginTop = 10;


  // AXES
  // category
  var categoryAxis = chart.categoryAxis;
  categoryAxis.fillAlpha = 1;
  categoryAxis.fillColor = "#FAFAFA";
  categoryAxis.gridAlpha = 0;
  categoryAxis.axisAlpha = 0;
  categoryAxis.gridPosition = "start";
  categoryAxis.position = "bottom";

  // value
  var valueAxis = new AmCharts.ValueAxis();
  valueAxis.title = "Jumlah pemasukan";
  valueAxis.stackType = "regular"; // allows stacking
  valueAxis.dashLength = 5;
  valueAxis.axisAlpha = 0;
  valueAxis.position = "right";
  //valueAxis.minimum = 0;
  //valueAxis.maximum = 10;
  valueAxis.integersOnly = true;
  valueAxis.gridCount = 10;
  valueAxis.reversed = false; // this line makes the value axis reversed
  chart.addValueAxis(valueAxis);

  // Create graphs
  generateGraphsFromData(chart, chartData);

  //default the other two graphs to hidden
  chart.graphs[1].hidden = true;
  chart.graphs[2].hidden = true;

  // CURSOR
  var chartCursor = new AmCharts.ChartCursor();
  chartCursor.cursorPosition = "mouse";
  chartCursor.zoomable = false;
  chartCursor.cursorAlpha = 0;
  chart.addChartCursor(chartCursor);

  // LEGEND
  var legend = new AmCharts.AmLegend();
  legend.useGraphSettings = true;
  legend.equalWidths = false;

  legend.marginBottom = 0;
  legend.marginLeft = 0;
  legend.marginRight = 0;
  legend.marginTop = 0;

  legend.valueText = ""; // [[value]]  to enter value

  chart.addLegend(legend, "legenddiv");

  // WRITE
  chart.write("chartdiv");
};

// This is getting the data...