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: "Apr", 
                    y: 0 },
                   {x: "May", 
                    y:40 },
                   {x: "May", 
                    y:40 }, 
                   {x: "May", 
                    y:40 },
                   {x: "May", 
                    y:40 },
                 ]
              },
              {
                name:"Mon",
                data:[
                   {x: "Apr", 
                    y: 10 },
                   {x: "May", 
                    y:40 },
                   {x: "May", 
                    y:40 }, 
                   {x: "May", 
                    y:40 },
                   {x: "May", 
                    y:40 },
                 ]
              },
              {
                name:"Tue",
                data:[
                   {x: "Apr", 
                    y: 20 },
                   {x: "May", 
                    y:40 },
                   {x: "May", 
                    y:40 }, 
                   {x: "May", 
                    y:40 },
                   {x: "May", 
                    y:40 },
                 ]
              },{
                name:"Wed",
                data:[
                   {x: "Apr", 
                    y: 40 },
                   {x: "May", 
                    y:40 },
                   {x: "May", 
                    y:40 }, 
                   {x: "May", 
                    y:40 },
                   {x: "May", 
                    y:40 },
                 ]
              },{
                name:"Thu",
                data:[
                   {x: "Apr", 
                    y: 50 },
                   {x: "May", 
                    y:40 },
                   {x: "May", 
                    y:40 }, 
                   {x: "May", 
                    y:40 },
                   {x: "May", 
                    y:40 },
               ...