JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://github.com/highslide-software/highcharts.com/raw/master/js/highcharts.src.js"></script>
<script type="text/javascript" src="https://github.com/highslide-software/highcharts.com/raw/master/js/modules/exporting.src.js"></script>
<script type="text/javascript" src="http://highcharts.com/js/modules/funnel.src.js"></script>

<div id="container" style="height: 300px; width: 500px"></div>

<!--
<button id="button">Button</button>
-->

JavaScript

$(document).ready(function() {
      new Highcharts.Chart({
        chart: {
          renderTo: 'container',
          defaultSeriesType: 'funnel',
          margin: 20,
          borderWidth: 0
        },
    
        title: null,
    
        tooltip: {
          formatter: function() {
            return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.y, 0);
          }
        },
    
        plotOptions: {
          series: {
            dataLabels: {
              borderWidth: 0,
              borderColor: "#fff",
              color: '#fff',
              connectorWidth: 0,
              formatter: function() {
                return '<b>'+ this.point.name +'</b> ('+ Highcharts.numberFormat(this.point.y, 0) +')';
              }
            },
    
            neckWidth: '35%',
            neckHeight: 0
          }
        },
    
        legend: {
          enabled: false
        },
    
        credits: {
          enabled: false
        },
    
        series: [{
          data: [
              ["slice 1", 800],
              ["slice 2", 700],
              ["slice 3", 600],
              ["slice 4", 500],
              ["slice 5", 400],
              ["slice 6", 30],
              ["slice 7", 20]]
        }]
      });
    });