JSFiddle - React, Tailwind, and code Playground

by tiagocarvalho

HTML

<script src="http://www.amcharts.com/lib/amstock.js"></script>
<link rel="stylesheet" href="http://www.amcharts.com/lib/style.css">
 <div id="chartdiv" style="width:90%; height:200px;"></div>

JavaScript

var chartData = [{
                date: new Date(2012, 0, 1),
                distance: 227,
                duration: 227
            }, {
                date: new Date(2012, 0, 2),
                distance: 371,
                duration: 371
            }, {
                date: new Date(2012, 0, 3),
                distance: 433,
                duration: 433
            }, {
                date: new Date(2012, 0, 4),
                distance: 345,
                duration: 345
            }, {
                date: new Date(2012, 0, 5),
                distance: 480,
                duration: 480
            }, {
                date: new Date(2012, 0, 6),
                distance: 386,
                duration: 386
            }, {
                date: new Date(2012, 0, 7),
                distance: 348,
                duration: 348
            }, {
                date: new Date(2012, 0, 8),
                distance: 238,
                duration: 238
            }, {
                date: new Date(2012, 0, 9),
                distance: 218,
                duration: 287
            }, {
                date: new Date(2012, 0, 10),
                distance: 349,
                duration: 485
            }, {
                date: new Date(2012, 0, 11),
                distance: 603,
                duration: 890
            }, {
                date: new Date(2012, 0, 12),
                distance: 534,
                duration: 810
            }];
            var chart;

            AmCharts.ready(function () {
                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;
                chart.categoryField = "date";
                chart.marginTop = 0;

                // AXES
                // category axis
                var categoryAxis = chart.categoryAxis;
                categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
             ...