JSFiddle - React, Tailwind, and code Playground

by Avinash Singh

HTML

<div class="line-chart margin-top-20">
<svg  id="sv-line-chart"> 
</svg>
</div>

CSS

.line-chart{
  text-align: center;
.line {
  fill: none;
  stroke-width: 3px;
}


.overlay {
  fill: none;
  border:2px solid white;
  stroke:white;
  stroke-width: 3px;
}

 div.tooltip {	
    position: absolute;		
    top:100px;
    text-align: center;	
    padding:0 3px;		
    font-size: 11px ;
    font-family:$noto-sans;		
    border-radius: 4px;	
    background:$btn-default-color;
    box-shadow: 0 2px 4px 0 rgba(25, 25, 25, 0.1);
    border: solid 1px rgba(204, 204, 204, 0.4);		
    		
}
.axis line{
  fill: none;
  stroke: rgba(0, 122, 188, 0.2);
  stroke-width: 1px;
}
.axis{
  fill: none;
  stroke:white;
  stroke-width: 1px;
}

.area {
  fill: url(#area-gradient);
  stroke-width: 05px;
}
}

JavaScript

$onInit()
       {
        var data = [
          {
            'timescale': 'MAR', 
            'totalAmount': 100
          },
          {
            'timescale': 'APR', 
            'totalAmount': 10
          },
          {
            'timescale': 'JUN', 
            'totalAmount': 75
           
          },
          {
            'timescale': 'JUL', 
            'totalAmount': 75
           
          }
          ,{
            'timescale': 'AUG', 
            'totalAmount': 75
           
          }
        ];
        // set the dimensions and margins of the graph
        var margin = { top: 40, right: 80, bottom: 30, left: 50 },  
             svg = d3.select('#sv-line-chart'),
            width = +svg.attr('width') ,
            height = +svg.attr('height');
        
        var g = svg.append("g");
        var tooltipDiv = d3.select("body").append("div")	
            .attr("class", "tooltip");
        // set the ranges
        var x = d3.scaleBand().rangeRound([0, width]).padding(1),
            y = d3.scaleLinear().rangeRound([height, 0]),
            z = d3.scaleOrdinal(['#036888','#0D833C','#D2392A']);
        
        // define the line
        var line = d3.line()
          .x(function(d) { return x(d.timescale); })
          .y(function(d) { return y(d.total); });
        
        // scale the range of the data
        z.domain(d3.keys(data[0]).filter(function(key) {
          return key !== "timescale";
        }));
        
        var trends = z.domain().map(function(name) {
          return {
            name: name,
            values: data.map(function(d) {
              return {
                timescale: d.timescale,
                total: +d[name]
              };
            })
          };
        });
        
        x.domain(data.map(function(d) { return d.timescale; }));
        y.domain([0, d3.max(trends, function(c) {
          return d3.max(c.values, function(v) {
            return v.total+10;
          });
        })]);
     ...