JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div id="livechart" style="width:100%; height: 500px;">

</div>

JavaScript

/* var data = [
{date: '1-May-12', close: 58.13},
{date:'30-Apr-12',close: 53.98},
{date: '27-Apr-12', close: 67.00},
{date: '26-Apr-12',close:89.70},
{date:'25-Apr-12',close: 99.00},
{date: '24-Apr-12',close: 130.28},
{date: '23-Apr-12',close: 166.70},
{date: '20-Apr-12',close: 234.98},
{date: '19-Apr-12',close: 345.44},
{date: '18-Apr-12',close: 443.34},
{date: '17-Apr-12',close: 543.70},
{date: '16-Apr-12',close: 580.13},
{date: '13-Apr-12',close: 605.23},
{date: '12-Apr-12',close: 622.77},
{date: '11-Apr-12',close: 626.20},
{date: '10-Apr-12',close: 628.44},
{date: '9-Apr-12',close: 636.23},
{date: '5-Apr-12',close: 633.68},
{date: '4-Apr-12',close: 624.31},
{date: '3-Apr-12',close: 629.32}]; */
var data = [{
    "date": "06-08-2018 01:00:00",
    "close": 152
}
];


var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

var parseDate = d3.timeParse("%d-%m-%Y %H:%M:%S");

var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var xAxis = d3.axisBottom(x)
    .tickFormat(d3.timeFormat('%H:%M:%S'));

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

var valueline = d3.line().curve(d3.curveCardinal)
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

var svg = d3.select("#livechart")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Get the data
/* d3.csv("simple.csv", function(error, data) { */


  /*  var lineData = data.map(function (point, index, arr) {
        var next = arr[index + 1],
          prev = arr[index];
        return {
          x: parseDate(point.date),
          y: point.close,
          x1: parseDate(point.date),
          y1: point.close,
          x2: (next) ? parseDate(next.date) : parseDate(prev.date),
         ...