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/taucharts@2/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 chart = new Taucharts.Chart({
    type: 'horizontal-stacked-bar',
    y: 'process',
    x: 'count',
    color: 'stage', 
    data: [
            {
                process: 'sales',
                stage: 'visit',
                count: 100
            },
            {
                process: 'sales',
                stage: 'trial',
                count: 50
            },
            {
                process: 'sales',
                stage: 'buy',
                count: 15
            },
            {
                process: 'sales',
                stage: 'go away',
                count: -7
            }
    ]
});
chart.renderTo('#bar');