JSFiddle - React, Tailwind, and code Playground
HTML
<body style="background-color:Gray;color:#34495e">
</body>
CSS
svg {
font: 15px sans-serif;
fill:#bdc3c7;
}
.line {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
.axis path,
.axis line {
fill: none;
stroke: #bdc3c7;
shape-rendering: crispEdges;
}
JavaScript
var chartRT = function () {
var _self = this;
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
};
function guid() {
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
_self.guid = guid();
_self.DataSeries = [];
_self.Ticks = 20;
_self.TickDuration = 1000; //1 Sec
_self.MaxValue = 100;
_self.w = 800;
_self.h = 400;
_self.margin = { top: 50, right: 120, bottom: 60, left: 300 };
_self.width = _self.w - _self.margin.left - _self.margin.right;
_self.height = _self.h - _self.margin.top - _self.margin.bottom;
_self.xText = '';
_self.yText = '';
_self.titleText = '';
_self.chartSeries = {};
_self.Init = function () {
d3.select('#chart-' + _self.guid).remove();
//
// Back fill DataSeries with Ticks of 0 value data
//
/*
_self.fillDataSeries = function () {
for (Series in _self.DataSeries) {
while (_self.DataSeries[Series].Data.length < _self.Ticks +3) {
_self.DataSeries[Series].Data.push({ Value: 0 });
}
}
}
*/
//_self.fillDataSeries();
//
// SVG Canvas
//
_self.svg = d3.select("body").append("svg")
.attr("id", 'chart-' + _self.guid)
.attr("width", _self.w)
.attr("height", _self.h)
.append("g")
.attr("transform", "translate(" + _self.margin.left + "," + _self.margin.top + ")");
//
// Use Clipping to hide chart mechanics
//
_self.svg.append("defs").append("clipPath")
.attr("id", "clip-" + _self.guid)
.append("rect")
.attr("width", _self.width)
.attr("height", _self.height);
//
// Generate colors from DataSeries Names
//
_self.color =...