JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<div id="charts">
        <svg width="800" height="500"></svg>
    </div>

CSS

svg {
    font: 10px sans-serif;
    shape-rendering: crispEdges;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
  }
 
  path.domain {
    stroke: none;
  }
 
  .y .tick line {
    stroke: #ddd;
  }

JavaScript

function createChartLegend(mainDiv, group) {
            var z = d3.scaleOrdinal(d3.schemeCategory10);
            var mainDivName = mainDiv.substr(1, mainDiv.length);
            $(mainDiv).before("<div id='Legend_" + mainDivName + "' class='pmd-card-body' style='margin-top:0; margin-bottom:0;'></div>");
            var keys = group;
            keys.forEach(function(d) {
                var cloloCode = z(d);
                $("#Legend_" + mainDivName).append("<span class='team-graph team1' style='display: inline-block; margin-right:10px;'>\
          			<span style='background:" + cloloCode +
                    ";width: 10px;height: 10px;display: inline-block;vertical-align: middle;'>&nbsp;</span>\
          			<span style='padding-top: 0;font-family:Source Sans Pro, sans-serif;font-size: 13px;display: inline;'>" + d +
                    " </span>\
          		</span>");
            });

        }
        
        let graphData = [{
            "category": "All Sales",
            "2015_11": "26747.659999999993",
            "2015_12": "11976.27",
            "2015_9": "5063.77",
            "2015_10": "230674.85999999993",
            "2016_5": "52759.41",
            "2016_7": "37195.4",
            "2016_11": "71845.98",
            "2016_4": "58810.37000000002",
            "2016_3": "489585.08999999973",
            "2016_10": "413754.65000000014",
            "2016_9": "290539.20196272613"
        },
        {
            "category": "Dec-2015",
            "2015_12": "1387.18"
        },
        {
            "category": "Jan-2016",
            "2016_1": "11057.07"
        },
        {
            "category": "Feb-2016",
            "2016_2": "2074.89"
        },
        {
            "category": "Mar-2016",
            "2016_3": "12719.89"
        },
        {
            "category": "Apr-2016",
            "2016_4": "26767.739999999998"
        },
        {
            "category": "May-2016",
            "2016_5": "10917.85"
        },
        {
    ...