JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<script src="//d3js.org/d3.v4.min.js">

</script>
<div id="test" style="width:100%; height : 100%;">

</div>

CSS

.yAxisBar path{
  stroke : none;
}
.xAxisBar path{
  stroke : #6a6d6f;
}

.grid path, .grid line{
  stroke : #6a6d6f;
}
.yAxisBar text, .xAxisBar text{
  fill : #6a6d6f;
}
  #tooltip {
    background-color: rgba(187, 187, 187, 0.7);
    border-radius: 5px;
    width : auto;
    height: auto;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    text-align: center;
  }
  
  body {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
  }

JavaScript

var parseTime = d3.timeParse("%Y-%m-%d");
let parseTimeBar = d3.timeParse("%Y-%m");
let newDataSet = {"sale_forecast_data": 
[
        {
            "yearmonth": "1-Jan-2020",
            "yearwithmonth": "2020-01",
            "tcv": "1153139.9035114504"
        },
        {
            "yearmonth": "1-Feb-2020",
            "yearwithmonth": "2020-02",
            "tcv": "9998170.086678844"
        },
        {
            "yearmonth": "1-Mar-2020",
            "yearwithmonth": "2020-03",
            "tcv": "1649728.0125"
        },
        {
            "yearmonth": "1-Apr-2020",
            "yearwithmonth": "2020-04",
            "tcv": "214118.83347561"
        },
        {
            "yearmonth": "1-May-2020",
            "yearwithmonth": "2020-05",
            "tcv": "0"
        },
        {
            "yearmonth": "1-Jun-2020",
            "yearwithmonth": "2020-06",
            "tcv": "0"
        },
        {
            "yearmonth": "1-Jul-2020",
            "yearwithmonth": "2020-07",
            "tcv": "0"
        },
        {
            "yearmonth": "1-Aug-2020",
            "yearwithmonth": "2020-08",
            "tcv": "0"
        },
        {
            "yearmonth": "1-Sep-2020",
            "yearwithmonth": "2020-09",
            "tcv": "0"
        },
        {
            "yearmonth": "1-Oct-2020",
            "yearwithmonth": "2020-10",
            "tcv": "0"
        },
        {
            "yearmonth": "1-Nov-2020",
            "yearwithmonth": "2020-11",
            "tcv": "0"
        },
        {
            "yearmonth": "1-Dec-2020",
            "yearwithmonth": "2020-12",
            "tcv": "0"
        }
    ], "cash_forecast_data": 
    [
        {
            "formated_payment_date": "01-Jan-2020",
            "original_payment_date": "2020-01-01",
            "cash_revenue": "493.152"
        },
        {
            "formated_payment_date": "07-Jan-2020",
            "original_payment_date": "2020-01-07",
           ...