JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="salesReportStackChart">

</div>

<ul class="legend"></ul>

CSS

#salesReportStackChart {
  width: 100%;
  height: 400px;
}

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

#tooltipLiveBill {
   background-color: #333;
  color: #fff;
    border-radius: 5px;
    width : auto;
    height: auto;
    pointer-events: none;
    position: absolute;
    text-align: center;
    padding : 5px;
    font-size : 12px;
}

.axis line{
    stroke: #333
}
.axis text{
    fill: #333;
    font-size: 12px;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
}
.axis path{
    stroke: #333;
} 

.legend {
  list-style-type: none;
}

JavaScript

let element = d3.select('#salesReportStackChart').node();
let divWidth = element.getBoundingClientRect().width;
let divHeight = element.getBoundingClientRect().height;

let margin = {top: 20, right: 30, bottom: 70, left: 40};
let width = divWidth - margin.left - margin.right;
let height = divHeight - margin.top - margin.bottom;

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

let x = d3.scaleBand()
    .rangeRound([0, width])
    .padding(0.5)
    //.paddingInner(0.5)
    //.paddingOuter(0.5)
/*     
    
    let x0 = d3.scaleBand()
      .rangeRound([0, width])
      .padding(0.01)
      //.paddingInner(0.5) */

let z = d3.scaleOrdinal(d3.schemeCategory20)

  // Date format https://bl.ocks.org/zanarmstrong/ca0adb7e426c12c06a95
let parseTime  = d3.timeParse("%b-%Y")
let colorsList = {
lost_and_lost_approval: "#ef6236",
sale_status_1:  "#2d294f",
sale_status_2: "#429b8d", 
sale_status_3: "#e93739",
sale_status_4: "#e7d44e",
sale_status_5: "#f1a4ec",
sale_status_6: "#4478f6",
sale_status_7: "#96f9d0",
sale_status_8: "#4fc6f9",
sale_status_9: "#feeead",
sale_status_10: "#d27ae7",
sale_status_11:  "#9b9655",
sale_status_12: "#1a5173",
sale_status_13: "#737373"};


let colors = ["#ef6236", "#2d294f", "#429b8d", "#e93739", "#e7d44e", "#f1a4ec", "#4478f6",  "#96f9d0",
"#4fc6f9", "#feeead", "#d27ae7", "#9b9655", "#1a5173", "#737373"]
    // Load stocks data
  // Ex: 0: {symbol: "MSFT", date: "Jan 2000", price: "39.81"}
  /* d3.csv('https://raw.githubusercontent.com/LyonDataViz/MOS5.5-Dataviz/master/data/stocks.csv', function(error, raw) { */
    
    let symbols = [];
    let data_stack = [{
    category: "Aug-2007",
    lost_and_lost_approval: 10,
    sale_status_1: 10,
    sale_status_2: 20,
    sale_status_3: 30,
    sale_status_4: 780.86,
    sale_status_5: 50,
    sale_status_6: 60,
    sale_status_7: 30,
    sale_status_8: 70,
    sale_status_9: 60,
    sale_status_10: 40,
    sale_status_11: 70,
    sale_status_12: 50,
    sale_status_13: 80,
   ...