JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
<div id="main">
  
</div>

CSS

#main {
  width: 400px;
  height: 600px;
}

JavaScript

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

var builderJson = {
  "all": 100,
  "charts": {
    "pie": 1,
    "scatter": 1,
    "candlestick": 1,
    "radar": 2,
    "heatmap": 3,
    "treemap": 6,
    "graph": 7,
    "boxplot": 7,
    "parallel": 8,
    "gauge": 9,
    "funnel": 15,
    "sankey": 30
  },
};


option = {
    xAxis: [{
        type: 'value',
        max: builderJson.all,
        axisLabel: {
        	show: false,
        },
        splitLine: {
            show: false
        }
    },
     ],
    yAxis: [{
        data: Object.keys(builderJson.charts),
        axisLabel: {
            show: false,
        },
        splitLine: {
            show: false
        },
        axisLine: {
        	show: false
        },
        axisTick: {
        	show: false,
        }
    },
    ],
    series: [{
        type: 'bar',
        stack: 'chart',
        barCategoryGap: 30,
        barWidth: 20,
        label: {
	        position: [0, -14],
          formatter: '{b}',
          show: true
        },
        itemStyle: {
        	borderRadius: [0, 2, 2, 0],
        },
        data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.charts[key];
        })
    },
     {
        type: 'bar',
        stack: 'chart',
        barCategoryGap: 30,
        barWidth: 20,
        itemStyle: {
            color: 'whitesmoke'
        },
        label: {
        	position: 'insideRight',
          formatter: function(params) { return 100 - params.value + '%'},
          show: true
        },
        data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.all - builderJson.charts[key];
        })
    }
    ]
};

option && myChart.setOption(option);