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" style="width: 100%; height: 400px;"></canvas>

JavaScript

var analyticsData = [136,716,641,871,1028,911,672,460],
		labels = ['Jun 2020','Jul 2020','Aug 2020','Sep 2020','Oct 2020','Nov 2020','Dec 2020','Jan 2021'],
    average = [136*.35, 716*.35, 641*.35, 871*.35, 1028*.35, 911*.35, 672*.35, 460];

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
		labels: labels,
		datasets: [{
			label: 'Page Views',
			data: analyticsData,
			fill: false
		},
    {
    	label: '~ Pages Views by 11th of the month',
      data: average,
      fill: true
    }
    ]
	},
    options: {
        aspectRatio: 4,
        responsive: false
    }
});