JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<select id="travel-select">
  <option value="all">View All</option>
  <option	value="afism">AFISM</option>
  <option value="procurement">Procurement Services</option>
</select>
<div class="chart-wrapper">
  <div id="donut-1"></div>
</div>

<pre id="csv" style="display:none">Year,Total
2010,1251
2011,1653
2012,1984
2013,1543
</pre>

JavaScript

$(function() {
			Highcharts.setOptions({
				lang: {
					decimalPoint: '.',
					thousandsSep: ','
				}
			});
										
				$('#donut-1').highcharts({
					credits: {
						enabled: false
					},
					chart: {
						type: 'column',
						height: 300
					},
					title: {
						text: 'VOUCHERS TOTAL $ AMOUNT',					
					},
					 xAxis: {
						categories: [
							'Totals'							
						],
						crosshair: true
					},
					yAxis: {				
						title: {
							text: 'Total'
						}
					},
					legend: {
						enabled: true
					},
					tooltip: {				
						pointFormat: 'Total: <b>${point.y}</b>'
					},
					data: {
            csv: document.getElementById('csv').innerHTML
        },				
			});			

			var travelOption = $('#travel-select').val();
			$("#travel-select").change(function () {
				var travelOption = $(this).val();
				var chart = $('#donut-1').highcharts();				
		
				//change chart data
				if(travelOption === "afism"){
								
					chart.series[0].setData([8546312,5461237,761548,10546982], false);					
					$('#donut-1').highcharts().redraw();
				} else if(travelOption ==="procurement"){					
					chart.series[0].setData([3456845,9842315,12652843,6458912], false);					
					$('#donut-1').highcharts().redraw();
				} else{					
					console.log("AAAAHHHHHHHHHHH!");
					//$('#donut-1').highcharts().redraw();
				}
			});	
		});