JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>

</head>
<body>

</body>
</html>

JavaScript

/* [dlatikay 20180130] attempt to paint charts client-side */
function craftsvg(n, v) {
  n = document.createElementNS("http://www.w3.org/2000/svg", n);
  for (var p in v)
    n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m, p, o, s) { return "-" + m.toLowerCase(); }), v[p]);
  return n
}

var svg = craftsvg("svg");
document.body.appendChild(svg);

/* the math */
var score=115.7;
var pixwidth=180;
var pixheight=18;
var overallmax=270.0;
if(overallmax<100.0) overallmax=100.0;
var xhund=180/overallmax*100.0;
var xgraph=pixwidth/overallmax*score;

/* the gfx */
var g = craftsvg('rect', { x: 0, y: 6, width: xgraph, height: pixheight-4, stroke:'',fill:'#00bb11'});
svg.appendChild(g);
var r = craftsvg('rect', { x: 0, y: 4, width: pixwidth, height: pixheight, stroke:'#222222', fill:'transparent' });
svg.appendChild(r);
var l = craftsvg('line', { x1: xhund, y1:0,x2:xhund,y2:pixheight+8,stroke:'#222222' });
svg.appendChild(l);

var test = craftsvg('rect', { x: 0, y: 40, width: pixwidth, height: pixheight, stroke:'#222222', fill:'transparent',"stroke-width":5 });
svg.appendChild(test);