JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//cdn.jsdelivr.net/taucharts/latest/tauCharts.min.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdn.jsdelivr.net/taucharts/latest/tauCharts.min.js"></script>
<div id="interval-element"></div>
CSS
html,body,#interval-element{
width:100%;
height:100%;
margin:0;
padding: 0;
}
JavaScript
var data = [ {
"team": "d",
"cycleTime": 2,
"effort": 2,
"count": 15,
"priority": "low"
}, {
"team": "d",
"cycleTime": 3,
"effort": 3,
"count": 9,
"priority": "medium"
}, {
"team": "d",
"cycleTime": 4,
"effort": 4,
"count": 3,
"priority": "high"
}, {
"team": "l",
"cycleTime": 3,
"effort": 2,
"count": 5,
"priority": "low"
}, {
"team": "l",
"cycleTime": 4,
"effort": 3,
"count": 3,
"priority": "medium"
}, {
"team": "l",
"cycleTime": 5,
"effort": 4,
"count": 4,
"priority": "high"
}, {
"team": "k",
"cycleTime": 3,
"effort": 5,
"count": 5,
"priority": "low"
}, {
"team": "k",
"cycleTime": 4,
"effort": 6,
"count": 8,
"priority": "medium"
}, {
"team": "k",
"cycleTime": 5,
"effort": 8,
"count": 4,
"priority": "high"
}];
var intervalElement = {
unit: {
type: 'COORDS.RECT',
x: 'count',
y: 'team',
guide: {
showGridLines: 'xy',
padding: {
l: 56,
b: 46,
r: 8,
t: 8
},
y: {
padding: 8,
label: 'Count of completed entities'
}
},
unit: [{
type: 'ELEMENT.INTERVAL',
color:'priority',
flip:true
}]
}
};
var bar = new tauCharts.Plot({
data: data,
spec: intervalElement
}).renderTo('#interval-element');