JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/taucharts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/taucharts.min.css">
<div id="bar"></div>

CSS

html,
body,
#bar {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#bar>svg {
  display: block;
}

JavaScript

var defData = [{
    "team": "One",
    "cycleTime": 1,
    "effort": 1,
    "count": 1,
    "priority": "low"
  }, {
    "team": "Two",
    "cycleTime": 4,
    "effort": 3,
    "count": 8,
    "priority": "medium"
  },
   {
    "team": "Three",
    "cycleTime": 3,
    "effort": 5,
    "count": 5,
    "priority": "low"
  },
  {
    "team": "Four",
    "cycleTime": 2,
    "effort": 4,
    "count": 1,
    "priority": "low"
  },
];
var chart = new Taucharts.Chart({
  data: defData,
  type: 'bar',
  x: 'team',
  y: 'effort'
});
chart.renderTo('#bar');