JSFiddle - React, Tailwind, and code Playground

by Sourabh Tewari

HTML

<div id="canvas"></div>

CSS

.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.bar {
    fill: #4682b4;
}
.x.axis path {
    display: none;
}

JavaScript

var data = [{
      "State": "CA",
          "Under 5 Years": "2704659",
          "5 to 13 Years": "4499890",
          "14 to 17 Years": "2159981",
          "18 to 24 Years": "3853788",
          "25 to 44 Years": "10604510",
          "45 to 64 Years": "8819342",
          "65 Years and Over": "4114496"
  }, {
      "State": "TX",
          "Under 5 Years": "2027307",
          "5 to 13 Years": "3277946",
          "14 to 17 Years": "1420518",
          "18 to 24 Years": "2454721",
          "25 to 44 Years": "7017731",
          "45 to 64 Years": "5656528",
          "65 Years and Over": "2472223"
  }, {
      "State": "NY",
          "Under 5 Years": "1208495",
          "5 to 13 Years": "2141490",
          "14 to 17 Years": "1058031",
          "18 to 24 Years": "1999120",
          "25 to 44 Years": "5355235",
          "45 to 64 Years": "5120254",
          "65 Years and Over": "2607672"
  }, {
      "State": "FL",
          "Under 5 Years": "1140516",
          "5 to 13 Years": "1938695",
          "14 to 17 Years": "925060",
          "18 to 24 Years": "1607297",
          "25 to 44 Years": "4782119",
          "45 to 64 Years": "4746856",
          "65 Years and Over": "3187797"
  }, {
      "State": "IL",
          "Under 5 Years": "894368",
          "5 to 13 Years": "1558919",
          "14 to 17 Years": "725973",
          "18 to 24 Years": "1311479",
          "25 to 44 Years": "3596343",
          "45 to 64 Years": "3239173",
          "65 Years and Over": "1575308"
  }, {
      "State": "PA",
          "Under 5 Years": "737462",
          "5 to 13 Years": "1345341",
          "14 to 17 Years": "679201",
          "18 to 24 Years": "1203944",
          "25 to 44 Years": "3157759",
          "45 to 64 Years": "3414001",
          "65 Years and Over": "1910571"
  }];

  var WIDTH = 860,
      HEIGHT = 500;

  var Y_AXIS_LABEL = "Population";

  var GROUPS = "State";

  var BARS = ['Under 5 Years', '5 to 13 Years', '14 to 17 Years', '18 to 24...