JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

JavaScript

var matchDays = [];
for(var i = 1; i <= 38; i++) {
	matchDays.push(i);
}

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: matchDays,
        datasets: [{
            label: 'Liverpool 2019/20 (Paused at 29 games)',
            data: [3,6,9,12,15,18,21,24,25,28,31,34,37,40,43,46,49,52,55,58,61,64,67,70,73,76,79,79,82],
            fill: false,
            borderColor: 'red'
        },
        {
            label: 'Liverpool 2019/20 (Projected)',
            data: [null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,82,85,88,91,92,95,98,101,104,107],
            fill: false,
            borderColor: 'pink'
        },
        {
            label: 'Liverpool 2018/19',
            data: [3,6,9,12,15,18,19,20,23,26,27,30,33,36,39,42,45,48,51,54,54,57,60,61,62,65,66,69,70,73,76,79,82,85,88,91,94,97],
            fill: false,
            borderColor: 'silver'
        },
        {
        		label: 'Liverpool 1989/90',
         		data: [3,4,5,8,11,12,15,18,18,21,21,21,24,27,27,30,31,34,35,38,41,42,43,46,49,50,53,56,56,59,62,65,66,67,70,73,76,79],
            fill: false,
            borderColor: 'gold'
        },
        {
        		label: 'Man City 2017/18',
            data: [3,4,7,10,13,16,19,22,25,28,31,34,37,40,43,46,49,52,55,58,59,62,62,65,68,69,72,75,78,81,84,84,87,90,93,94,97,100],
            fill: false,
            borderColor: 'skyblue'
        }]
    }
});