JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="chart" id="history-chart-main"></div>

CSS

.chart {
  text-align: center;
  padding: 10px 10px 25px 10px;
  background: #f6f6f6;
}
.chart svg {
  overflow: visible;
}
.chart .overlay {
  fill: none;
  pointer-events: all;
}
.orang_circle {
  fill: red;
}

JavaScript

const greenline_data = [
	{value: 46, date: '2020-01-23', formatted_date: '01/23/2020'},
  {value: 48, date: '2020-01-24', formatted_date: '01/24/2020'},
  {value: 26, date: '2020-01-25', formatted_date: '01/25/2020'},
  {value: 36, date: '2020-01-26', formatted_date: '01/26/2020'},
  {value: 40, date: '2020-01-27', formatted_date: '01/27/2020'},
  {value: 48, date: '2020-01-28', formatted_date: '01/28/2020'},
  {value: 34, date: '2020-01-29', formatted_date: '01/29/2020'},
  {value: 33, date: '2020-01-30', formatted_date: '01/30/2020'}
];
const orangeline_data = [
	{value: 16, date: '2020-01-23'},
  {value: 10, date: '2020-01-24'},
  {value: 16, date: '2020-01-26'},
  {value: 8, date: '2020-01-30'}
];
create_area_chart(greenline_data, orangeline_data, 'history-chart-main');

function create_area_chart(data, eps_data, target){
    document.getElementById(target).innerHTML = '';
    var parentw = document.getElementById(target).offsetWidth;
    var parenth = 0.6*parentw;
    var svg = d3.select('#'+target).append("svg").attr("width", parentw).attr("height", parenth),
        margin = {top: 20, right: 20, bottom: 40, left: 50},
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        
        

    var parseTime = d3.timeParse("%Y-%m-%d");
    bisectDate = d3.bisector(function(d) { return d.date; }).left;

    var x = d3.scaleTime()
        .rangeRound([0, width]);

    var y = d3.scaleLinear()
        .rangeRound([height, 0]);
        
    

    var area = d3.area()
        .x(function(d) { return x(d.date); })
        .y1(function(d) { return y(d.value); });

    data.forEach(function(d) {
        d.date = parseTime(d.date);
        d.value = +d.value;
    });

    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, 1.02*d3.max(data, function(d) { return...