JSFiddle - React, Tailwind, and code Playground

by Paco86

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="chart"></div>

<div id="buttons">
  <button type="button" class="up">
    <i class="fa fa-arrow-up"></i>
  </button>
  <button type="button" class="down">
    <i class="fa fa-arrow-down"></i>
  </button>
  <button type="button" class="left">
    <i class="fa fa-arrow-left"></i>
  </button>
  <button type="button" class="right">
    <i class="fa fa-arrow-right"></i>
  </button>  
</div>

CSS

#chart {
    width: 800px;
    height: 600px;
    background-color: #f7f7f7;
    margin: 25px auto;
}

#buttons {
  width: 800px;
  margin: 25px auto;
  text-align: center;
}

button {
  width: 100px;
  padding: 10px;
}

circle {
  pointer-events: none;
}

JavaScript

const mapData =...