JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//use.typekit.net/fnq4lni.js"></script>
<div id="deliverability" class="chart"></div>
<script src="//use.typekit.net/fnq4lni.js"></script>
<script>try{Typekit.load();}catch(e){}</script>

CSS

body {
  margin: 0 auto;
  font-size: 67%;
  font-family: "fira-sans", sans-serif;
  -webkit-print-color-adjust:exact;
  position: relative;
}

.chart {
  width: 245px;
  height: 180px; 
  background: #fff;
  color: #000;
  border: 1px solid #E3E6E8;
  padding: 5px;
  margin: 10px auto;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
}

.light-score {
  fill: #fff;
  font-weight: bold;
font-size: .9rem;
}

.benchmark{
  font-size: .6rem;
}

.chart-header{
    padding: 5px;
    height: 40px;
    position: relative;
}
.chart-header h1{
    margin: 0;
    text-transform: uppercase;
    font-size: .75rem;
}
.chart-header .score-unit{
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
}
.chart-header span{
    margin: 0 auto;
    display: block;
}
.chart-header span.score{
    font-size: 1.6rem;
    font-weight: bold;
}
.chart-header span.scale{
    font-size: .6rem;
    text-transform: uppercase;
}

JavaScript

// score data
scoreData = [
    {key: 'ANN', val: 94},
    {key: 'MACYS', val: 95},
    {key: 'NRDSTM', val: 97}
];

opts = {};
opts.elem = '#deliverability';

drawChart(scoreData, opts);

function drawChart(data, opts) {
    
// Chart setup
var chartHeaderHeight = 50,
    width = 245,
    height = (180 - chartHeaderHeight);

var chart = d3.select(opts.elem)
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var y = d3.scale.linear()
    .range([height, 0])
    .domain([0, 100]);

var barWidth = width / ((data.length) + 2); 
var barPadding = barWidth / 10;

var brandColors = ["#00688d", "#00a4a5", "#F4B847"];

// benchmark data
var averageData = [{ "x": 0,   "y": 78},  { "x": width,  "y": 78}];    
var bestinclassData = [{ "x": 0,   "y": 99},  { "x": width,  "y": 99}];

    
// Chart header
    var chartHeader = d3.select(opts.elem)
    .insert("div","svg")
    .attr("width", width)
    .attr("height", chartHeaderHeight)
    .attr("class","chart-header")
    .html('<h1>Deliverability <br/> Score</h1><div class="score-unit"><span class="score">' + scoreData[0].val + '</span><span class="scale">out of 100</span></div>');
    
// Benchmark lines
var lineFunction = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return y(d.y); })
        .interpolate("linear");

var avgLine = chart.append("path")
        .attr("d", lineFunction(averageData))
        .attr("stroke", "#444")
        .attr("stroke-width", 1)
        .attr("class","average-line")
        .style("stroke-dasharray", "5,5");
    
var bestLine = chart.append("path")
        .attr("d", lineFunction(bestinclassData))
        .attr("stroke", "#444")
        .attr("stroke-width", 1)
        .attr("class","best-line")
        .style("stroke-dasharray", "5,5");
    
var avgLabel = chart.append("text")
		.attr("transform", "translate(" + 0 + "," + y(averageData[0].y) + ")")
	    .attr("dy", "1.2em")
		.attr("text-anchor", "start")
        .attr("class" ,...