gradient chart (modified version) https://codepen.io/grayghostvisuals/pen/gpROOz

index.html

<div class="line-chart">
  <div class="aspect-ratio">
    <canvas id="chart"></canvas>
  </div>
</div>

main.css

$bg: #252429;

html,body{height:100%;}body{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;background:$bg;}

*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
	padding: 20px;
}
 
.line-chart {
	animation: fadeIn 600ms cubic-bezier(.57,.25,.65,1) 1 forwards;
  opacity: 1;
	max-width: 640px;
	width: 100%;
	background : white;
}

.aspect-ratio {
  height: 0;
  padding-bottom: 50%; // 495h / 990w
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

main.js

// ============================================
// As of Chart.js v2.5.0
// http://www.chartjs.org/docs
// ============================================

var chart    = document.getElementById('chart').getContext('2d'),
    gradient = chart.createLinearGradient(0, 0, 0, 450);

// i love orange, you can change the 217, 131, 11
gradient.addColorStop(0, 'rgba(217, 131, 11, 1)');
gradient.addColorStop(0.5, 'rgba(217, 131, 11, 0.25)');
gradient.addColorStop(1, 'rgba(217, 131, 11, 0)');


var data  = {
    labels:  [19, 22, 45, 55, 80, 81, 54, 81],
    datasets: [{
			label: 'Custom Label Name',
			backgroundColor: gradient,
			borderWidth: 2,
			borderColor: 'rgb(217, 131, 11)',
			data: [19, 22, 45, 55, 80, 81, 54, 81]
    }]
};


var options = {
	responsive: true,
	maintainAspectRatio: true,
	animation: {
		easing: 'easeInOutQuad',
		duration: 520
	},
	scales: {
		xAxes: [{
			gridLines: {
      // remove grid line 
				display : false,
        // remove border bottom 
				drawBorder: false,
			},
			 
			ticks: {
      // remove ticks 
                    display: false //this will remove only the label
                }
		}],
		yAxes: [{
			gridLines: {
				display : false,
				drawBorder: false,
			},
			 drawBorder: false,
			ticks: {
                    display: false //this will remove only the label
                }
		}]
	},
	elements: {
		line: {
			tension: 0.4
		},
		 point:{
                        radius: 0
                    }
	},
	legend: {
		display: false
	},
	point: {
		backgroundColor: 'white'
	},
	tooltips: {
		titleFontFamily: 'Open Sans',
		backgroundColor: 'rgba(0,0,0,0.3)',
		titleFontColor: 'red',
		caretSize: 5,
		cornerRadius: 2,
		xPadding: 10,
		yPadding: 10
	},
	layout : {
		 padding: {
            bottom: -20,
			 left : -20
        }
	}
};


var chartInstance = new Chart(chart, {
    type: 'line',
    data: data,
		options: options
});