JSFiddle - React, Tailwind, and code Playground

by yasirunilan

HTML

<html>

  <head>
  </head>

  <body>
    <svg/>
  </body>

</html>

CSS

svg {
  font-family: Sans-Serif, Arial;
}

.line {
  stroke-width: 2;
  fill: none;
}

.axis path {
  stroke: none;
}

.text {
  font-size: 12px;
}

.title-text {
  font-size: 12px;
}

JavaScript

var data = [{
    name: "USA",
    values: [{
        date: "October",
        price: "100"
      },
      {
        date: "November",
        price: "110"
      },
      {
        date: "December",
        price: "145"
      },
      {
        date: "January",
        price: "241"
      },
      {
        date: "February",
        price: "101"
      },
      {
        date: "March",
        price: "90"
      },
      {
        date: "April",
        price: "120"
      },
      {
        date: "May",
        price: "135"
      },
      {
        date: "June",
        price: "99"
      },
      {
        date: "July",
        price: "105"
      },
      {
        date: "August",
        price: "101"
      },
      {
        date: "September",
        price: "106"
      }
    ]
  },
  {
    name: "UK",
    values: [{
        date: "October",
        price: "130"
      },
      {
        date: "November",
        price: "120"
      },
      {
        date: "December",
        price: "115"
      },
      {
        date: "January",
        price: "220"
      },
      {
        date: "February",
        price: "100"
      },
      {
        date: "March",
        price: "140"
      },
      {
        date: "April",
        price: "90"
      },
      {
        date: "May",
        price: "235"
      },
      {
        date: "June",
        price: "160"
      },
      {
        date: "July",
        price: "86"
      },
      {
        date: "August",
        price: "201"
      },
      {
        date: "September",
        price: "140"
      }
    ]
  }
];

const margin = 80;
const width = 1000 - 2 * margin;
const height = 550 - 2 * margin;

var duration = 250;

var lineOpacity = "0.25";
var lineOpacityHover = "0.85";
var otherLinesOpacityHover = "0.1";
var lineStroke = "1.5px";
var lineStrokeHover = "2.5px";

var circleOpacity = '0.85';
var circleOpacityOnLineHover = "0.25"
var circleRadius = 3;
var circleRadiusHover = 6;


/* Format Data */
var parseDate =...