JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="//d3js.org/d3.v4.min.js"></script>
<div id="agent-profit-chart" style="width:100%; height : 350px;">

</div>
<div style="display: flex; justify-content: center;">
  <ul class="legendList"></ul>
</div>

CSS

.x.axis path,
.y.axis path {
  fill: none;
  stroke: #333;
}

.x.axis text,
.y.axis text {
  fill: #333;
}

.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}

ul {
  list-style-type: none;
}

#color-rect {
  display: block;
  float: left;
  margin: 0 5px;
  width: 20px;
  height: 15px;
  border-radius: 2px;
}

#color-circle {
  display: block;
  float: left;
  margin: 0 5px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

JavaScript

let newData = 
[
        {
            "yearmonth": "2020-Jan",
            "yearwithmonth": "2020-01",
            "overhead_expenses": "0",
            "income": "0",
            "cumulative_expense": "0",
            "cumulative_income": "0"
        },
        {
            "yearmonth": "2020-Feb",
            "yearwithmonth": "2020-02",
            "overhead_expenses": "100",
            "income": "0",
            "cumulative_expense": "100",
            "cumulative_income": "0"
        },
        {
            "yearmonth": "2020-Mar",
            "yearwithmonth": "2020-03",
            "overhead_expenses": "622.222222222221",
            "income": "940",
            "cumulative_expense": "722.222222222221",
            "cumulative_income": "940"
        },
        {
            "yearmonth": "2020-Apr",
            "yearwithmonth": "2020-04",
            "overhead_expenses": "100",
            "income": "0",
            "cumulative_expense": "822.222222222221",
            "cumulative_income": "940"
        },
        {
            "yearmonth": "2020-May",
            "yearwithmonth": "2020-05",
            "overhead_expenses": "100",
            "income": "0",
            "cumulative_expense": "922.222222222221",
            "cumulative_income": "940"
        },
        {
            "yearmonth": "2020-Jun",
            "yearwithmonth": "2020-06",
            "overhead_expenses": "100",
            "income": "0",
            "cumulative_expense": "1022.22222222222",
            "cumulative_income": "940"
        },
        {
            "yearmonth": "2020-Jul",
            "yearwithmonth": "2020-07",
            "overhead_expenses": "100",
            "income": "0",
            "cumulative_expense": "1122.22222222222",
            "cumulative_income": "940"
        },
        {
            "yearmonth": "2020-Aug",
            "yearwithmonth": "2020-08",
            "overhead_expenses": "100",
            "income": "0",
            "cumulative_expense":...