JSFiddle - React, Tailwind, and code Playground

by sathish panduga p

HTML

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

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<button id="back">Back</button>

JavaScript

$(function () {
  Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function(color) {
    return {
        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
        stops: [
            [0, color],
            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
        ]
    };
});

 var chart,chart1;                
 $(document).ready(function() {
     drawFirstLevel();
     $('#back').click(function(){
         chart1.destroy();
         drawFirstLevel();                
     });
            
 });


 function drawFirstLevel(){

        // Build the chart
     chart = new Highcharts.Chart({
         chart: {
             renderTo: 'container',
             plotBackgroundColor: null,
             plotBorderWidth: null,
             plotShadow: false
         },
         title: {
             text: 'Claim'
         },
         tooltip: {
             pointFormat: '{series.name}: <b>{point.y}</b>',
             percentageDecimals: 1
         },
         plotOptions: {
             pie: {
                 allowPointSelect: true,
                 cursor: 'pointer',
                 dataLabels: {
                     enabled: true,
                     color: '#000000',
                     connectorColor: '#000000',
                     formatter: function() {
                         return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                     }
                 },
                 point: {
                     events: {
                         click: function() {
                             drawSecondLevel(this.name+' Claims')                             
                         }
                     }
                 }
             }
         },
         scrollbar:{
             enabled:true
         },
         
         series: [{
             type: 'pie',
             name: 'Claim Details',
             data: [
                 {name:'Open',y:20,color:'green'},
                 {name:'Closed',y:30}
    ...