JSFiddle - React, Tailwind, and code Playground

by priyanksheth

HTML

<html>

<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<button class="btn invisible" id="backButton">< Back</button>

</body>
</html>

CSS

#backButton {
            border-radius: 4px;
            padding: 8px;
            border: none;
            font-size: 16px;
            background-color: #2eacd1;
            color: white;
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
        }

        .invisible {
            display: none;
        }

JavaScript

$(function (){

            var totalVisitors = 883000;
            var visitorsData = {
                "New vs Returning Visitors": [{                    
                    click: onClick,
                    cursor: "pointer",
                    explodeOnClick: false,
                    innerRadius: "75%",
                    legendMarkerType: "square",
                    name: "New vs Returning Visitors",
                    radius: "100%",
                    showInLegend: true,
                    startAngle: 90,
                    type: "doughnut",
                    dataPoints: [
                        { y: 519960, name: "New Visitors", color: "#E7823A" },
                        { y: 363040, name: "Returning Visitors", color: "#546BC1" }
                    ]
                }],
                "New Visitors": [{
                    color: "#E7823A",
                    name: "New Visitors",
                    type: "column",
                    dataPoints: [
                        { x: new Date("1 Jan 2015"), y: 33000 },
                        { x: new Date("1 Feb 2015"), y: 35960 },
                        { x: new Date("1 Mar 2015"), y: 42160 },
                        { x: new Date("1 Apr 2015"), y: 42240 },
                        { x: new Date("1 May 2015"), y: 43200 },
                        { x: new Date("1 Jun 2015"), y: 40600 },
                        { x: new Date("1 Jul 2015"), y: 42560 },
                        { x: new Date("1 Aug 2015"), y: 44280 },
                        { x: new Date("1 Sep 2015"), y: 44800 },
                        { x: new Date("1 Oct 2015"), y: 48720 },
                        { x: new Date("1 Nov 2015"), y: 50840 },
                        { x: new Date("1 Dec 2015"), y: 51600 }
                    ]
                }],
                "Returning Visitors": [{
                    color: "#546BC1",
                    name: "Returning Visitors",
                    type: "column",
                   ...