JSFiddle - React, Tailwind, and code Playground

by zzzrefiddle

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" data-auto-replace-svg="nest"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
        crossorigin="anonymous">
    <link rel="stylesheet" href="http://cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.css">
    <script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- <script src="export-csv.js"></script> -->
   
    <style>
        #container {
            min-width: 320px;
            max-width: 600px;
            margin: 0 auto;
        }

        .modal-footer {
            /* background-color: #f9f9f9; */
        }

        .date-container {
            width:...

JavaScript

$(function () {
    /**firefox uses caches for select value, which doesn't suit our requirement */
    $('select option selected').remove();
    /*create to class for to picker and from class for for picker and use*/
    /*$(".to").datepicker() to initialize datepicker in all the to and from classes respectively*/
    $("#to").datepicker();
    $("#from").datepicker();
    $("select").niceSelect();


});


Highcharts.SVGRenderer.prototype.symbols.download = function (x, y, w, h) {
    var path = [
        /* Arrow stem*/
        'M', x + w * 0.5, y,
        'L', x + w * 0.5, y + h * 0.7,
        /* Arrow head*/
        'M', x + w * 0.3, y + h * 0.5,
        'L', x + w * 0.5, y + h * 0.7,
        'L', x + w * 0.7, y + h * 0.5,
        /* Box*/
        'M', x, y + h * 0.9,
        'L', x, y + h,
        'L', x + w, y + h,
        'L', x + w, y + h * 0.9
    ];
    return path;
};
Highcharts.SVGRenderer.prototype.symbols.default = function (x, y, w, h) {
    var path = [
        'M', 6, 6.5,
        'L', 20, 6.5,
        'M', 6, 11.5,
        'L', 20, 11.5,
        'M', 6, 16.5,
        'L', 20, 16.5
    ];
    return path;
};

/*creating class for the chart creation*/
// $(function(){
    var pie_chart_z;
    class ChartDigit {
        constructor(url, divValue) {
            this.url = url;
            this.divValue = divValue;
            var highcharts;
            var jsondata;
            
        }
    /**
     * create chart is used for creating the chart while waiting for the response of the api from promise
     */
        createChart() {
            console.log(this);
            this.highcharts = Highcharts.chart({
    
                chart: {
                    type: 'column',
                    renderTo: this.divValue
                },
                title: {
                    text: 'Loading Data...'
                },
                xAxis: {
                    type: 'Loading...',
                    title: {
                        text:...