JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="statusChart" style="width:100%; height:400px;"></div>

JavaScript

let parseTime = d3.timeParse("%d-%m-%Y %H:%M")
var data = [{
	date: '01-09-2018',
  time: parseTime('01-09-2018 10:00'),
  status: 1
},{
	date: '01-09-2018',
  time: parseTime('01-09-2018 10:01'),
  status: 1
},{
	date: '01-09-2018',
  time: parseTime('01-09-2018 10:10'),
  status: 0
},{
	date: '01-09-2018',
  time: parseTime('01-09-2018 10:11'),
  status: 0
},{
	date: '01-09-2018',
  time: parseTime('01-09-2018 10:12'),
  status: 0
},{
	date: '01-09-2018',
  time: parseTime('01-09-2018 10:20'),
  status: 0
},{
	date: '02-09-2018',
  time: parseTime('01-09-2018 10:08'),
  status: 1
},{
	date: '02-09-2018',
  time: parseTime('01-09-2018 10:15'),
  status: 0
}];

var margin = {
      top: 20,
      right: 30,
      bottom: 30,
      left: 70
  };
  
var svg = d3.select("#statusChart").append("svg")
  .attr("class", "statusChart")
  .attr("preserveAspectRatio", "xMinYMin meet")
  .attr("viewBox", "0 0 " + ($("#statusChart").width()) + " " +
      ($("#statusChart").height()));
      
var g = svg.append("g")
.attr("class", "gChart")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      //  console.log($("#contractSpentBar").width(), $("#contractSpentBar").height())
var width = $("#statusChart").width() - margin.left - margin.right,
    height = $("#statusChart").height() - margin.top - margin.bottom;

var x = d3.scaleLinear()
    .range([0, width])
    
var y = d3.scaleBand()
      .rangeRound([height, 0])
      .padding(1);
      
x.domain(d3.extent(data, function (d) { return d.time; }));        
y.domain(data.map(function (d) {
    return d.date;
}));
        
console.log(x.domain(), y.domain())

var xAxis = d3.axisBottom(x)
      .ticks(4).tickFormat((d) => { return d3.timeFormat("%H:%M:%S")((d)); });

var yAxis = d3.axisLeft(y).ticks(4);

 // x axis
g.append("g")
  .attr("class", "xaxisChart")
  .attr('id', "axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

// y axis
g.append("g")
  .attr("class",...