JSFiddle - React, Tailwind, and code Playground

by amit6june

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div style="float:right; top:90px;">
<select id="ChType">
    <option value="Chnage Category">Chnage Category</option>
    <option value="Gender">Gender</option>
    <option value="Age">Age</option>
    <option value="Marital Status">Marital Status</option>
     <option value="Promo Behavioral Clusters">Promo Behavioral Clusters</option>
     <option value="Value">Value</option>
     <option value="Mission">Mission</option>
</select>
</div>  
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

CSS

.verticalLine {
    border-left: thick solid #ff0000;
}

JavaScript

var chart;
    $('#ChType').change(function(){
    changeType(this.value);
                   })
    function changeType(series) {
     var chart = $('#promobehavioralcluster').highcharts();
     var options = chart.options;
        chart.setTitle({
        text: series,
        align: 'left',
        x:80
        
    });
          
    var chart = $('#container').highcharts();
    $.ajax({
           url: 'http://echo.jsontest.com/uid/12345/value/nuno_bettencourt',
			    type: 'GET',
			    dataType: "json",
			    success: function (data) {
			    chart.series[0].setData([
                            ['Group12', 45.0],
                            ['Group21', 26.8], 
                            ['Group32', 8.5],
                            ['Group43', 6.2],
                            ['Group54', 0.7]
                                           ]);
                }
			  });
         }

     var chart;    

    chart = new Highcharts.Chart({
            chart: {
                renderTo: 'promobehavioralcluster',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                events: {
	        	load: function() {
	        	}
	        }
            },
            title: {
                text: 'Promo Behavioural Clusters',
                align: 'left',
                x:80
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    borderColor: '#FFFFFF',
                    innerSize: '70%',
                    size: 280,
                    dataLabels: {
                        enabled: false
                    }
                    ,showInLegend: true
                }
            },
            legend: {
                enabled: true,
                layout: 'vertical',
                align: 'right',
                width: 220,
               ...