JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div class='chart'></div>

CSS

svg rect {
  fill: orange;
}

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

JavaScript

var data = [80, 100, 56, 120, 180, 30, 40, 120, 160];
var width = 200,
  	scaleFactor = 10,
  	barHeight = 20,
  	padding = 5;

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

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

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

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