JSFiddle - React, Tailwind, and code Playground

by yonet3d

HTML

<div class="chart"></div>

CSS

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

JavaScript

var width = window.innerWidth;
var data = [3, 7, 21, 31, 35, 42];
//Create an x linear scale with domain of 0 to data max and range of 0 to width

//Create a color scale category10

//Append div elements to the chart div

//Use x scale to determine the width of the divs

//Use color scale to assign the background-color to the divs.

//Add the data as text to the divs