JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
   <div style="width: 900px; height: 500px">
        <canvas id="chart1"></canvas>
    </div>

JavaScript

let chart1 = new Chart(document.getElementById("chart1"), {
            type: 'line',
            data: {
                labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
                datasets: [
                    {
                        fill: false,
                        label: 'Page View',
                        borderColor: "hsl(226.15793242887034,78.48665583019744%,62.177112879909686%)",
                        data: [
                            {
                                labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
                            },
                            {
                                x: new Date('2018-04-21T16:00:00'),
                                y: 7
                            },
                            {
                                x: new Date("2018-04-21T18:00:00"),
                                y: 3
                            },
                            {
                                x: new Date("2018-04-21T20:00:00"),
                                y: 11
                            },
                            {
                                x: new Date("2018-04-23T12:00:00"),
                                y: 2
                            },
                            {
                                x: new Date("2018-04-23T13:00:00"),
                                y: 3
                            }
                        ],
                    },
                    //dataset 2
                    {
                        fill: false,
                        label: 'View Content',
                        borderColor: "hsl(232.84952363040048,93.45575469963681%,28.844243872178236%)",
                        data: [
                            {
                                labels: ["2018-04-21T17:00:00",...