JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

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

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

JavaScript

$(function () {
		 $(document).ready(function () {					
                   var data = [
                ['CSS',   24.2],
                ['HTML',  26.6],
                ['CSS3',  2],
                ['HTML5', 3.1],
                ['Other', 5.4]
            ]
                    Resultarr = [];
                    for (var i=0 ;i<10; i++) {
                        var data = {
                            LocationName: "AAA",
                            Ranking: i*2,
                            LocationId: i*3,
                            y:i*2
                        };
                        Resultarr.push(data);
                    }
                  /*  $.each(Resultarr, function (i, point) {
    point.y = point.Ranking;
});*/
                  //  var strJson =JSON.stringify(Resultarr) ;
                     console.log(  JSON.stringify(Resultarr) );
                        chart = new Highcharts.Chart({
                            chart: {
                                plotBackgroundColor: null,
                                plotBorderWidth: null,
                                plotShadow: false,
                                type: 'pie'
                            },
                            title: {
                                text: 'Village Development Measuring System'
                            },
                            tooltip: {
                                formatter: function () {

                                    return '<b>' + this.point.LocationName + '</b>: ' + this.point.Ranking + ' %';
                                    // return '<b>' + this.point.LocationName + '</b>: ' + this.point.Ranking + ' %'
                                }
                            },

                            plotOptions: {
                                pie: {
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    dataLabels: {
        ...