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: "2000", price: "100"},
                    {date: "2001", price: "110"},
                    {date: "2002", price: "145"},
                    {date: "2003", price: "241"},
                    {date: "2004", price: "101"}
                ]
            },
            {
                name: "UK",
                values: [
                    {date: "2000", price: "200"},
                    {date: "2001", price: "120"},
                    {date: "2002", price: "33"},
                    {date: "2003", price: "21"},
                    {date: "2004", price: "51"}
                ]
            },
            {
                name: "India",
                values: [
                    {date: "2000", price: "50"},
                    {date: "2001", price: "10"},
                    {date: "2002", price: "5"},
                    {date: "2003", price: "71"},
                    {date: "2004", price: "20"}
                ]
            },
            {
                name: "Australia",
                values: [
                    {date: "2000", price: "20"},
                    {date: "2001", price: "40"},
                    {date: "2002", price: "25"},
                    {date: "2003", price: "75"},
                    {date: "2004", price: "19"}
                ]
            },
            {
                name: "UAE",
                values: [
                    {date: "2000", price: "200"},
                    {date: "2001", price: "150"},
                    {date: "2002", price: "170"},
                    {date: "2003", price: "150"},
                    {date: "2004", price: "130"}
                ]
            },
            {
                name: "China",
                values: [
                    {date: "2000", price: "75"},
                    {date: "2001", price: "100"},
                    {date: "2002", price: "120"},
                ...