JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

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

CSS

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

JavaScript

var data = [50, 100, 120, 75],
  width = 420,
  barHeight = 30,
  stepFactor = 10;

var graph = d3.select('.chart')
  .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(' + (i * barHeight) + ', 0)'
  });

bar.append('rect')
  .attr('width', barHeight - stepFactor)
  .attr('height', function(d) {
    return d
  })
  .attr('fill', function(d) {
    return 'rgba(0,0,1,' + (0.1 * (d / barHeight)) + ')';
  });

bar.append('text')
  .attr('x', stepFactor - 0.5)
  .attr('y', function(d) {
    return d - stepFactor
  })
  .attr('dx', function(d) {
    switch (d.toString().length) {
      case 2:
        return '0.5em';

      case 3:
        return '0.8em';
    }
  })
  .text(function(d) {
    return d
  });