JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div align="center" style="font-size: 14px;">
  <div align="center" style="font-size: 14px;">
    Opted for
    <select style="border: 2px solid black" class="borderBox" id="states">

      <option value="allStates" data-othervalue="allStatesdd" data-cagr="allStatescg" data-rev="allStatesrev" data-exp="allStatesexp" data-debt="allStatesdebtser" data-def="allStatesdef" data-basic="allStatesrevenue" data-expyears="allStatesexpyears">All 17 States</option>

      <option value="ap" data-othervalue="apdd" data-cagr="apcg" data-rev="aprev" data-exp="apexp" data-debt="apdebtser" data-def="apdef" data-basic="aprevenue" data-expyears="apexpyears">Andhra Pradesh</option>

      <option value="br" data-othervalue="brdd" data-cagr="brcg" data-rev="brrev" data-exp="brexp" data-debt="brdebtser" data-def="brdef" data-basic="brrevenue" data-expyears="brexpyears">Bihar</option>

      <option value="cg" data-othervalue="cgdd" data-cagr="cgcg" data-rev="cgrev" data-exp="cgexp" data-debt="cgdebtser" data-def="cgdef" data-expyears="cgsexpyears">Chhattisgarh</option>
      <!-- <option value="dl" data-othervalue="dldd" data-cagr="dlcg" data-rev="dlrev" data-exp="dlexp" data-debt="dldebtser" data-def="dldef">Delhi</option>
      <option value="gj" data-othervalue="gjdd" data-cagr="gjcg" data-rev="gjrev" data-exp="gjexp" data-debt="gjdebtser" data-def="gjdef" data-expyears="gjexpyears">Gujarat</option>
      <option value="hr" data-othervalue="hrdd" data-cagr="hrcg" data-rev="hrrev" data-exp="hrexp" data-debt="hrdebtser" data-def="hrdef" data-expyears="hrexpyears">Haryana</option>
      <option value="jk" data-othervalue="jkdd" data-cagr="jkcg" data-rev="jkrev" data-exp="jkexp" data-debt="jkdebtser" data-def="jkdef" data-expyears="jkexpyears">Jammu and Kashmir</option>
     ...

CSS

button.chart-update {
  cursor: pointer;
  background-color: #D3D3D3;
  border: none;
  border-radius: 2px;
  color: rgba(0, 0, 0, 0.9);
  font-weight: bold;
  outline: none;
}

button.selected {
  font-size: 12px;
  color: #D3D3D3;
  /* text color */
  line-height: 14px;
  text-align: center;
  background-color: #000;
  shadow: none;
  outline: none;
}

JavaScript

var chart,
  chartOptions = {},
  allStatesrev = [{
    type: 'pie',
    name: 'Share',
    innerSize: '70%',
    data: [
      ['Capital Expenditure', 12],
      ['Repayment of Loans', 4],
      ['Revenue Expenditure', 84]
    ]
  }],
  apexpyears = [{
    pointWidth: 18,
    name: 'Across Years',
    data: [{
      name: 'Revenue Expenditure',
      y: [123, 456, 678]
    }, {
      name: 'Capital Expenditure',
      y: [908, 786, 645]
    }, {
      name: 'Repayment of Loans',
      y: [789, 456, 123]
    }]
  }],
  dataForStates = {
    'All 17 States': {
      pieData: [
        ['Capital Expenditure', 12],
        ['Repayment of Loans', 4],
        ['Revenue Expenditure', 84]
      ],
      lineData: [{
        name: 'Revenue Expenditure',
        data: [123, 456, 678]
      }, {
        name: 'Capital Expenditure',
        data: [908, 786, 645]
      }, {
        name: 'Repayment of Loans',
        data: [789, 456, 123]
      }]
    },
    'Andhra Pradesh': {
      pieData: [
        ['Capital Expenditure', 50],
        ['Repayment of Loans', 20],
        ['Revenue Expenditure', 30]
      ],
      lineData: [{
        name: 'Revenue Expenditure',
        data: [323, 543, 123]
      }, {
        name: 'Capital Expenditure',
        data: [534, 513, 982]
      }, {
        name: 'Repayment of Loans',
        data: [734, 623, 532]
      }]
    },
    'Bihar': {
      pieData: [
        ['Capital Expenditure', 33],
        ['Repayment of Loans', 33],
        ['Revenue Expenditure', 34]
      ],
      lineData: [{
        name: 'Revenue Expenditure',
        data: [666, 777, 222]
      }, {
        name: 'Capital Expenditure',
        data: [32, 912, 321]
      }, {
        name: 'Repayment of Loans',
        data: [283, 821, 327]
      }]
    },
    'Chhattisgarh': {
      pieData: [
        ['Capital Expenditure', 13],
        ['Repayment of Loans', 57],
        ['Revenue Expenditure', 30]
      ],
      lineData: [{
        name: 'Revenue Expenditure',
     ...