JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div class='elem'></div>

CSS

svg rect {
  fill: orange;
}

svg text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

JavaScript

var data = [5, 10, 12];
var width = 260,
  scaleFactor = 10,
  barHeight = 20;

var graph = d3.select('.elem')
  .append('svg')
  .attr('width', width)
  .attr('height', barHeight * data.length);

var bar = graph.selectAll('g')
  .data(data)
  .enter()
  .append('g')
  .attr('transform', function(d, i) {
    return 'translate(0, ' + (i * barHeight) + ')'
  });

bar.append('rect')
  .attr('width', function(d) {
    return d * barHeight
  })
  .attr('height', barHeight - 1);

bar.append('text')
  .attr('x', function(d) {
    return ((d * barHeight) - 3);
  })
  .attr('y', scaleFactor)
  .attr('dy', '.35em')
  .text(function(d) {
    return d
  });