JSFiddle - React, Tailwind, and code Playground

HTML

<div id="charts"></div>

CSS

.axis path,
.axis line {
    fill: none;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

JavaScript

var data = [
       {
         "subcategories": [
           {
             "subcategory": "Subcategory 1",
             "defects": [
               {
                 "defect" : "Label",
                 "total": 8,
                 "breakdown": {
                   "moderate" : 6,
                   "severe" : 2
                 }
               },
               {
                 "defect": "Longer Label",
                 "total": 7,
                 "breakdown": {
                   "moderate" : 4,
                   "severe" : 3
                 }
               },
               {
                 "defect": "Much longer label",
                 "total": 0,
                 "breakdown": {
                   "moderate" : 0,
                   "severe" : 0
                 }
               },
               {
                 "defect": "Much much much longer label",
                 "total": 0,
                 "breakdown": {
                   "moderate" : 0,
                   "severe" : 0
                 }
               }
             ]
           },
           {
             "subcategory": "Subcategory 2",
             "defects": [
               {
                 "defect": "Super duper long label this label is so long holy crap long label",
                 "total": 11,
                 "breakdown": {
                   "moderate" : 5,
                   "severe" : 6
                 }
               },
               {
                 "defect": "Kinda long lable right here",
                 "total": 2,
                 "breakdown": {
                   "moderate" : 12,
                   "severe" : 2
                 }
               }
             ]
           }
         ],
         "category": "Category 1"
       }
   ];
    //set some basic styling and sizing  
var fontSize = 11;

var margin = {top: 20, right: 20, bottom: 80, left: 30},
    width = 800 - margin.left - margin.right,
    height = 1300 - margin.top - margin.bottom;

//make an chart...