JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://code.highcharts.com/stock/highstock.js"></script>
  <script src="https://code.highcharts.com/modules/sunburst.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://code.highcharts.com/modules/export-data.js"></script><script src="https://code.highcharts.com/modules/accessibility.js"></script>
  
<body>
  <div>

<select id="type_">
<option value="1">Trade Value</option>
<option value="2">Volume</option>
<option value="3">Market Cap</option>
</select>
</div>


<figure class="highcharts-figure">
    <div id="container" style="width:750px"></div>
</figure>
</body>

CSS

<style>
.highcharts-tooltip table th {
    padding-bottom: 0.2em;
    border-bottom: 1px solid silver;
}
</style>

JavaScript

var data =[{
      id: '0.0',
      parent: '',
    	name: 'KSE 100',
      volume : 3232322,
      chg : 2.9,
      netChg: 1.3,
      index : 32819,
      count : 500,
      color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, '#003a04'], // start
        [1, '#056b11'] // end
    ]
},
    }, {
      id: '1.0',
      parent: '0.0',
      name: 'Automobiles',
      chg : 21.2,
      netChg: 2.4,
      index : 389283,
      count : 20,
      color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, '#008709'], // start
        [1, '#26D701']
    ]
},
    }, {
      parent: '1.0',
      name: 'BKTI',
      value: 1,
    }, {
      parent: '1.0',
      name: 'TATA',
      value: 1,
    }, {
      parent: '1.0',
      name: 'Tesla',
      value: 1,
      color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, '#7e0505'], // start
        [1, '#bd0505'] // end
    ]
},
    }, {
      id: '2.0',
      name: 'Commerical Bank',
      parent: '0.0',
      chg : 21.2,
      netChg: 2.4,
      index : 389283,
      count : 30,
      color: {
    linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
    stops: [
        [0, '#850b0b'], // start
        [1, '#E20000'] // end
    ]
}
    }, {
      parent: '2.0',
      name: 'HBL',
      value: 1,
      color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, '#00AB08'], // start
        [1, '#26D701'] // end
    ]
},
    }, {
      parent: '2.0',
      name: 'SC',
      value: 1
    }, {
      parent: '2.0',
      name: 'ABL',
      value: 1
    }, {
      id: '3.0',
      name: 'Cement',
      parent: '0.0',
      chg : 21.2,
      netChg: 2.4,
      index : 389283,
      count: 210,
      color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, '#008709'], // start
        [1, '#26D701'] // end
    ]
}
    }, {
      parent: '3.0',
      name: 'OGDC',
      value: 1,
      chg :...