JSFiddle - React, Tailwind, and code Playground

by TommySze

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<h3>
Mouse over first data in dataset 1, will activate first data in dataset 2.
</h3>
<canvas id="myChart" width="470" height="200"></canvas>

JavaScript

var ctx = document.getElementById("myChart");
var barChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'Dataset 1',
            data: [{
                x: '2019-01-15',
                y: 100
            }, {
                x: '2019-02-03',
                y: 300
            }],
            backgroundColor: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(255, 0, 0, 1)',
            borderWidth: 1
        }, {
            label: 'Dataset 2',
            data: [{
                x: '2019-01-03',
                y: 150
            }, {
                x: '2019-01-15',
                y: 200
            }, {
                x: '2019-02-06',
                y: 250
            }],
            backgroundColor: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 255, 0, 1)',
            borderWidth: 1
        }],
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                }
            }],
            xAxes: [{
                type: 'time',
                position: 'bottom',
                time: {
                    min: "2019-1-1",
                    max: "2019-2-28",
                    unit: "month",
                    displayFormats: {
                        "month": "YYYY-MM",
                    }
                }
            }]
        }
    }
});