JSFiddle - React, Tailwind, and code Playground

by pentium10

HTML

<div id="mychart"></div>

CSS

#mychart {
    margin:10px 10px 10px 10px;
    width:90%;
    max-width: 800px;
    height:400px;
}

JavaScript

var myDataValues = [{
    "lot": "87120",
    "bucket2": "4000.00"},
{
    "lot": "1306",
    "bucket2": "11000.00"},
{
    "lot": "1306",
    "bucket1": "10000.00"},
{
    "lot": "1306",
    "bucket2": "5000.00"},
{
    "lot": "1306",
    "bucket2": "5000.00"},
{
    "lot": "1306",
    "bucket2": "10000.00"},
{
    "lot": "1306",
    "bucket2": "2000.00"},
{
    "lot": "1306",
    "bucket2": "5000.00"},
{
    "lot": "1306",
    "bucket2": "0.00"},
{
    "lot": "1306",
    "bucket2": "10000.00"},
{
    "lot": "1306",
    "bucket2": "7000.00"},
{
    "lot": "1306",
    "bucket2": "8000.00"},
{
    "lot": "1306",
    "bucket2": "4000.00"},
{
    "lot": "1742",
    "bucket2": "5000.00"},
{
    "lot": "1306",
    "bucket2": "12000.00"},
{
    "lot": "1306",
    "bucket1": "3000.00"},
{
    "lot": "1306",
    "bucket2": "4000.00"},
{
    "lot": "1306",
    "bucket1": "3000.00"},
{
    "lot": "1306",
    "bucket2": "10000.00"},
{
    "lot": "1306",
    "bucket2": "5000.00"},
{
    "lot": "1306",
    "bucket2": "6000.00"},
{
    "lot": "1306",
    "bucket1": "3000.00"},
{
    "lot": "1306",
    "bucket2": "4000.00"},
{
    "lot": "1306",
    "bucket2": "9000.00"},
{
    "lot": "1306",
    "bucket2": "9000.00"},
{
    "lot": "1306",
    "bucket2": "7000.00"},
{
    "lot": "1306",
    "bucket2": "5000.00"},
{
    "lot": "1306",
    "bucket2": "3000.00"},
{
    "lot": "1306",
    "bucket2": "3000.00"},
{
    "lot": "1306",
    "bucket2": "7000.00"},
{
    "lot": "1306",
    "bucket2": "11000.00"},
{
    "lot": "133293",
    "bucket1": "9000.00"},
{
    "lot": "34412",
    "bucket1": "15000.00"},
{
    "lot": "54450",
    "bucket1": "2000.00"},
{
    "lot": "48787",
    "bucket1": "11000.00"},
{
    "lot": "49658",
    "bucket1": "7000.00"},
{
    "lot": "69260",
    "bucket1": "16000.00"},
{
    "lot": "74923",
    "bucket1": "32000.00"},
{
    "lot": "20037",
    "bucket1": "25000.00"},
{
    "lot": "64033",
    "bucket1": "13000.00"},
{
    "lot": "114562",
   ...