JSFiddle - React, Tailwind, and code Playground

by tolland

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Relative Price Chart</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>

<body>
  <canvas id="myChart" width="800" height="400"></canvas>
  <input type="range" id="slider" min="0" max="100" step="1" value="0">
  <script src="https://cdn.jsdelivr.net/npm/moment"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>

</body>

</html>

JavaScript

const dataSymbol1 = [
  {
    "time": "2023-07-31",
    "price": 7699.3999
  },
  {
    "time": "2023-08-01",
    "price": 7666.2998
  },
  {
    "time": "2023-08-02",
    "price": 7561.6001
  },
  {
    "time": "2023-08-03",
    "price": 7529.2002
  },
  {
    "time": "2023-08-04",
    "price": 7564.3999
  },
  {
    "time": "2023-08-07",
    "price": 7554.5000
  },
  {
    "time": "2023-08-08",
    "price": 7527.3999
  },
  {
    "time": "2023-08-09",
    "price": 7587.2998
  },
  {
    "time": "2023-08-10",
    "price": 7618.6001
  },
  {
    "time": "2023-08-11",
    "price": 7524.2002
  },
  {
    "time": "2023-08-14",
    "price": 7507.2002
  },
  {
    "time": "2023-08-15",
    "price": 7389.6001
  },
  {
    "time": "2023-08-16",
    "price": 7356.8999
  },
  {
    "time": "2023-08-17",
    "price": 7310.2002
  },
  {
    "time": "2023-08-18",
    "price": 7262.3999
  },
  {
    "time": "2023-08-21",
    "price": 7257.7998
  },
  {
    "time": "2023-08-22",
    "price": 7270.7998
  },
  {
    "time": "2023-08-23",
    "price": 7320.5000
  },
  {
    "time": "2023-08-24",
    "price": 7333.6001
  },
  {
    "time": "2023-08-25",
    "price": 7338.6001
  },
  {
    "time": "2023-08-29",
    "price": 7465.0000
  },
  {
    "time": "2023-08-30",
    "price": 7473.7002
  },
  {
    "time": "2023-08-31",
    "price": 7439.1001
  },
  {
    "time": "2023-09-01",
    "price": 7464.5000
  },
  {
    "time": "2023-09-04",
    "price": 7452.7998
  },
  {
    "time": "2023-09-05",
    "price": 7437.8999
  },
  {
    "time": "2023-09-06",
    "price": 7426.1001
  },
  {
    "time": "2023-09-07",
    "price": 7441.7002
  },
  {
    "time": "2023-09-08",
    "price": 7478.2002
  },
  {
    "time": "2023-09-11",
    "price": 7496.8999
  },
  {
    "time": "2023-09-12",
    "price": 7527.5000
  },
  {
    "time": "2023-09-13",
    "price": 7526.0000
  },
  {
    "time": "2023-09-14",
    "price": 7673.1001
  },
  {
    "time": "2023-09-15",
    "price": 7711.3999
  },
 ...