JSFiddle - React, Tailwind, and code Playground

by Athira Sandeep

HTML

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart">
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto);

body {
  font-family: Roboto, sans-serif;
}

#chart {
  max-width: 650px;
  margin: 35px auto;
}

JavaScript

var options = {
  chart: {
    type: 'heatmap'
  },
  series: [{
                name:"Sun",
                data:[
                   {x: "04-26-2020", 
                    y: 0 },
                   {x: "05-03-2020", 
                    y:40 },
                   {x: "05-10-2020", 
                    y:40 }, 
                   {x: "05-17-2020", 
                    y:40 },
                   {x: "05-24-2020", 
                    y:40 },
                 ]
              },
              {
                name:"Mon",
                data:[
                   {x: "04-27-2020", 
                    y: 10 },
                   {x: "05-04-2020", 
                    y:40 },
                   {x: "05-11-2020", 
                    y:40 }, 
                   {x: "05-18-2020", 
                    y:40 },
                   {x: "05-25-2020", 
                    y:40 },
                 ]
              },
              {
                name:"Tue",
                data:[
                   {x: "04-28-2020", 
                    y: 20 },
                   {x: "05-05-2020", 
                    y:40 },
                   {x: "05-12-2020", 
                    y:40 }, 
                   {x: "05-19-2020", 
                    y:40 },
                   {x: "05-26-2020", 
                    y:40 },
                 ]
              },{
                name:"Wed",
                data:[
                   {x: "04-29-2020", 
                    y: 40 },
                   {x: "05-06-2020", 
                    y:40 },
                   {x: "05-13-2020", 
                    y:40 }, 
                   {x: "05-20-2020", 
                    y:40 },
                   {x: "05-27-2020", 
                    y:40 },
                 ]
              },{
                name:"Thu",
                data:[
                   {x: "04-30-2020", 
                    y: 50 },
                   {x: "05-07-2020", 
                    y:40 },
                   {x: "05-14-2020", 
 ...