JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.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'
}, {
  id: '1.0',
  parent: '0.0'
}];


var data2 = [{
  id: '0.0',
  parent: '',
  name: 'KSE ALL',
  index: 32819
}, {
  id: '1.0',
  parent: '0.0',
  name: 'Chemical'
}];

var options = {
  chart: {
    height: '70%',
    renderTo: 'container'
  },
  series: [{
    type: "sunburst",
    name: 'Root',
    data: data
  }]
};

var chart = Highcharts.chart(options);

$('#type_').on('change', function() {
  chart.series[0].setData(data2);
});