JSFiddle - React, Tailwind, and code Playground

by amcharts

HTML

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

<button id="7days" onclick="change7Days(e)">7 Days</button>
<button id="14days" onclick="change14Days()">14 Days</button>
<button id="21days" onclick="change21Days()">21 Days</button>
<button id="30days" onclick="change30Days()">30 Days</button>

CSS

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

JavaScript

const data = [{
  "date": new Date("2020-01-02"),
  "visits": 25
}, {
  "date": new Date("2020-01-01"),
  "visits": 34
}, {
  "date": new Date("2019-12-31"),
  "visits": 17
}, {
  "date": new Date("2019-12-30"),
  "visits": 19
}, {
  "date": new Date("2019-12-29"),
  "visits": 1
}, {
  "date": new Date("2019-12-28"),
  "visits": 32
}, {
  "date": new Date("2019-12-27"),
  "visits": 14
}, {
  "date": new Date("2019-12-26"),
  "visits": 28
}, {
  "date": new Date("2019-12-25"),
  "visits": 2
}, {
  "date": new Date("2019-12-24"),
  "visits": 10
}, {
  "date": new Date("2019-12-23"),
  "visits": 9
}, {
  "date": new Date("2019-12-22"),
  "visits": 7
}, {
  "date": new Date("2019-12-21"),
  "visits": 0
}, {
  "date": new Date("2019-12-20"),
  "visits": 2
}, {
  "date": new Date("2019-12-19"),
  "visits": 1
}, {
  "date": new Date("2019-12-18"),
  "visits": 13
}, {
  "date": new Date("2019-12-17"),
  "visits": 14
}, {
  "date": new Date("2019-12-16"),
  "visits": 38
}, {
  "date": new Date("2019-12-15"),
  "visits": 46
}, {
  "date": new Date("2019-12-14"),
  "visits": 28
}, {
  "date": new Date("2019-12-13"),
  "visits": 4
}, {
  "date": new Date("2019-12-12"),
  "visits": 5
}, {
  "date": new Date("2019-12-11"),
  "visits": 12
}, {
  "date": new Date("2019-12-10"),
  "visits": 36
}, {
  "date": new Date("2019-12-09"),
  "visits": 47
}, {
  "date": new Date("2019-12-08"),
  "visits": 17
}, {
  "date": new Date("2019-12-07"),
  "visits": 25
}, {
  "date": new Date("2019-12-06"),
  "visits": 31
}, {
  "date": new Date("2019-12-05"),
  "visits": 5
}, {
  "date": new Date("2019-12-04"),
  "visits": 52
}].reverse();


// Create chart instance
const chart = am4core.create("chartdiv", am4charts.XYChart);

const xAxis = chart.xAxes.push(new am4charts.DateAxis());
xAxis.dateFormats.setKey("day", "dd/MM");
xAxis.renderer.minGridDistance = 10;
xAxis.renderer.labels.template.rotation = 45;
xAxis.renderer.labels.template.verticalCenter =...