JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<div id="barLineChart" style="width: 100%; height: 400px;"></div>


<svg>
  <path d="M2.7736413030488827e-15,-45.297A45.297,45.297,0,0,1,43.080007018621565,-13.99754279420199A45.297,45.297,0,0,0,2.7736413030488827e-15,-45.297Z" stroke="black" ></path>
</svg>

JavaScript

let data = [{
date: '01_2020',
barvalue: 20,
linevalue: 40
}, {
date: '02_2020',
barvalue: 30,
linevalue: 20
}]

buildGraph(data);

function buildGraph(data){

    d3.select(".svgBarLine").remove();
    // d3.select("#tooltipMonthLevelGraph").remove();
   // set the dimensions and margins of the graph
    var margin = {top: 20, right: 20, bottom: 70, left: 70},
    width = $("#barLineChart").width() - margin.left - margin.right,
    height = $("#barLineChart").height() - margin.top - margin.bottom;

    // var this.tooltipDiv = d3.select('body').append('div')
    // .attr('id', 'tooltipMonthLevelGraph')
    // .attr("class", "mytooltip")
    // .style("opacity", "0")
    // .style("display", "none");

    // set the ranges
    var x = d3.scaleBand()
          .range([0, width])
          .padding(0.5);
    var y = d3.scaleLinear()
          .range([height, 0]);
          
    // append the svg object to the body of the page
    // append a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    var svg = d3.select("#barLineChart").append("svg")
      .attr("class", "svgBarLine")
      .attr("preserveAspectRatio", "xMinYMin meet")
      .attr("viewBox", "0 0 " + ($("#barLineChart").width()) + " " + ($("#barLineChart").height()))
    // .attr("width", width + margin.left + margin.right)
    // .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");
    
    // format the data
    var parse = d3.timeParse("%m_%Y");

    // data.forEach(function(d) {
    // d.date = parse(d.date);
    // d.barvalue = +d.barvalue;
    // d.linevalue = +d.linevalue
    // });

    // Scale the range of the data in the domains
    let max1 = d3.max(data, function(d) { return d.barvalue ? d.barvalue * 1.2 : 0; });
    let max2 = d3.max(data, function(d) { return d.linevalue ? d.linevalue * 1.2 : 0; })
    x.domain(data.map(function(d) { return parse(d.date);...