JSFiddle - React, Tailwind, and code Playground

by Nimeshka Srimal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<div id="chart"></div>

JavaScript

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            [ "x", "1/30/2018", "1/30/2018", "1/30/2018", "1/30/2018", "1/31/2018", "2/1/2018", "2/2/2018", "2/3/2018", "2/5/2018", "2/7/2018", "2/9/2018", "2/11/2018", "2/14/2018", "2/17/2018", "2/20/2018", "2/23/2018", "2/27/2018", "3/3/2018", "3/7/2018", "3/11/2018", "3/16/2018", "3/21/2018", "3/26/2018", "3/31/2018", "4/6/2018", "4/12/2018", "4/18/2018", "4/24/2018", "5/1/2018", "5/8/2018", "5/15/2018", "5/22/2018", "5/30/2018", "6/7/2018", "6/15/2018", "6/23/2018", "7/2/2018", "7/11/2018", "7/20/2018", "7/29/2018", "8/8/2018", "8/18/2018", "8/28/2018", "9/7/2018", "9/18/2018", "9/29/2018", "10/10/2018", "10/21/2018", "11/2/2018", "11/14/2018", "11/26/2018", "12/8/2018", "12/21/2018", "1/3/2019", "1/16/2019", "1/29/2019", "2/12/2019", "2/26/2019", "3/12/2019", "3/26/2019", "4/10/2019", "4/25/2019", "5/10/2019", "5/25/2019", "6/10/2019", "6/26/2019", "7/12/2019", "7/28/2019", "8/14/2019", "8/31/2019", "9/17/2019", "10/4/2019", "10/22/2019", "11/9/2019", "11/27/2019", "12/15/2019", "1/3/2020", "1/22/2020", "2/10/2020", "2/29/2020", "3/20/2020", "4/9/2020", "4/29/2020", "5/19/2020", "6/9/2020", "6/30/2020", "7/21/2020", "8/11/2020", "9/2/2020", "9/24/2020", "10/16/2020", "11/7/2020", "11/30/2020", "12/23/2020", "1/15/2021", "2/7/2021", "3/3/2021", "3/27/2021", "4/20/2021" ],
            [ "sample", 38, 124, 197, 45, 187, 107, 233, 179, 281, 130, 261, 16, 41, 93, 184, 101, 143, 86, 246, 238, 224, 203, 86, 216, 56, 267, 84, 42, 254, 257, 58, 103, 31, 40, 171, 287, 135, 109, 203, 280, 147, 166, 1, 80, 140, 178, 102, 48, 249, 279, 48, 144, 172, 102, 60, 79, 114, 115, 82, 228, 181, 275, 200, 63, 68, 19, 202, 74, 254, 281, 118, 284, 5, 82, 234, 174, 195, 68, 263, 294, 246, 173, 206, 49, 291, 35, 164, 81, 161, 83, 240, 149, 78, 250, 68, 287, 59, 215, 280 ] 
        ]
    },
    axis : {
        x : {
            type : 'timeseries',
            tick: {
                format: function (x) {...