Skip to content

Instantly share code, notes, and snippets.

@houssemFat
Created September 19, 2019 14:17
Show Gist options
  • Save houssemFat/c87d40a6fd2686a81ccace792e620a4f to your computer and use it in GitHub Desktop.
Save houssemFat/c87d40a6fd2686a81ccace792e620a4f to your computer and use it in GitHub Desktop.
gradient chart (modified version) https://codepen.io/grayghostvisuals/pen/gpROOz
<div class="line-chart">
<div class="aspect-ratio">
<canvas id="chart"></canvas>
</div>
</div>
$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;
}
}
// ============================================
// 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
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment