Skip to content

Instantly share code, notes, and snippets.

@rpalmite

rpalmite/chart-js-temperature-line-chart.markdown

Created June 24, 2018 02:09
Show Gist options
  • Save rpalmite/982bf2c9f23e9bc29f3f7081cf3253e6 to your computer and use it in GitHub Desktop.
Save rpalmite/982bf2c9f23e9bc29f3f7081cf3253e6 to your computer and use it in GitHub Desktop.
Download ZIP
Chart.js - Temperature line chart
Raw
chart-js-temperature-line-chart.markdown

Chart.js - Temperature line chart

Chart.js line chart with transparent points and custom labels.

A Pen by rozklad on CodePen.

License.

Raw
index.html
<div class="card">
<!-- Custom information -->
<div class="about">
<h3>Chart.js</h3>
<p class="lead">Temperature in °C</p>
</div>
<!-- Canvas for Chart.js -->
<canvas id="canvas"></canvas>
<!-- Custom Axis -->
<div class="axis">
<div class="tick">
<span class="day-number">10</span>
<span class="day-name">MON</span>
<span class="value value--this">26°C</span>
</div>
<div class="tick">
<span class="day-number">11</span>
<span class="day-name">TUE</span>
<span class="value value--this">14°C</span>
</div>
<div class="tick">
<span class="day-number">12</span>
<span class="day-name">WED</span>
<span class="value value--this">22°C</span>
</div>
<div class="tick">
<span class="day-number">13</span>
<span class="day-name">THU</span>
<span class="value value--this">12°C</span>
</div>
<div class="tick">
<span class="day-number">14</span>
<span class="day-name">FRI</span>
<span class="value value--this">20°C</span>
</div>
<div class="tick">
<span class="day-number">15</span>
<span class="day-name">SAT</span>
<span class="value value--this">12°C</span>
</div>
<div class="tick">
<span class="day-number">16</span>
<span class="day-name">SUN</span>
<span class="value value--this">18°C</span>
</div>
</div>
</div>
Raw
script.js
var canvas = document.getElementById("canvas");
// Apply multiply blend when drawing datasets
var multiply = {
beforeDatasetsDraw: function(chart, options, el) {
chart.ctx.globalCompositeOperation = 'multiply';
},
afterDatasetsDraw: function(chart, options) {
chart.ctx.globalCompositeOperation = 'source-over';
},
};
// Gradient color - this week
var gradientThisWeek = canvas.getContext('2d').createLinearGradient(0, 0, 0, 150);
gradientThisWeek.addColorStop(0, '#5555FF');
gradientThisWeek.addColorStop(1, '#9787FF');
// Gradient color - previous week
var gradientPrevWeek = canvas.getContext('2d').createLinearGradient(0, 0, 0, 150);
gradientPrevWeek.addColorStop(0, '#FF55B8');
gradientPrevWeek.addColorStop(1, '#FF8787');
var config = {
type: 'line',
data: {
labels: ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN", "MON"],
datasets: [
{
label: 'Temperature',
data: [18, 26, 14, 22, 12, 20, 12, 18, 10],
fill: false,
borderColor: 'rgba(255, 255, 255, 0.2)',
borderWidth: 2,
pointBackgroundColor: 'transparent',
pointBorderColor: '#FFFFFF',
pointBorderWidth: 3,
pointHoverBorderColor: 'rgba(255, 255, 255, 0.2)',
pointHoverBorderWidth: 10,
lineTension: 0,
}
]
},
options: {
responsive: false,
elements: {
point: {
radius: 6,
hitRadius: 6,
hoverRadius: 6
}
},
legend: {
display: false,
},
tooltips: {
backgroundColor: 'transparent',
displayColors: false,
bodyFontSize: 14,
callbacks: {
label: function(tooltipItems, data) {
return tooltipItems.yLabel + '°C';
}
}
},
scales: {
xAxes: [{
display: false,
}],
yAxes: [{
display: false,
ticks: {
beginAtZero: true,
},
}]
}
},
plugins: [multiply],
};
window.chart = new Chart(canvas, config);
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></script>
Raw
style.css
body {
background-color: #f3f5f7;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
* {
box-sizing: border-box;
}
.card {
background: linear-gradient(-45deg, #5555FF, #9787FF);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 375px;
border-radius: 10px;
overflow: hidden;
}
/* hide limit values on X axis */
.card #canvas {
margin-left: -30px;
margin-right: -30px;
width: 360px!important;
}
.card .about {
height: 185px;
padding: 20px;
box-sizing: border-box;
}
.card .about h3,
.card .about .lead {
margin-top: 0;
margin-bottom: 0;
font-weight: 400;
}
.card .about h3 {
font-size: 24px;
color: #fff;
}
.card .about .lead {
color: #eee;
}
.card .info {
float: left;
padding: 10px 30px 10px 0;
}
.card .info p {
font-size: 11px;
color: #aaa;
font-weight: 300;
}
.legends {
padding-top: 20px;
overflow: hidden;
}
.legend {
display: block;
width: 8px;
height: 8px;
margin-top: 15px;
margin-bottom: 15px;
border-radius: 50%;
}
.legend--this {
background-color: #5555FF;
}
.legend--prev {
background-color: #FF55B8;
}
.axis {
position: absolute;
color: #fff;
z-index: 1;
text-transform: uppercase;
display: flex;
width: 100%;
bottom: 0;
}
.axis .tick {
flex: 1;
position: relative;
font-size: 11px;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
.axis .tick::after {
content: "";
position: absolute;
display: block;
right: 0;
bottom: 0;
width: 1px;
height: 200px;
background: rgba(255, 255, 255, 0.2);
}
.axis .tick .value {
transform: translateY(-240px);
opacity: 0;
transition: all 0.3s;
position: absolute;
top: 20px;
left: 0;
color: #fff;
border-radius: 2px;
width: 100%;
line-height: 20px;
}
.axis .tick:hover .value.value--this {
transform: translateY(-160px);
display: block;
opacity: 0.4;
}
.value.value--this {
color: #fff;
font-weight: bold;
}
.day-number {
display: block;
}
.day-name {
display: block;
opacity: 0.4;
}
/* Animated background, credits: Manuel Pinto, https://codepen.io/P1N2O/pen/pyBNzX */
.card {
background: linear-gradient(-45deg, #5555FF, #9787FF, #FF55B8, #FF8787);
background-size: 400% 400%;
animation: bg 20s infinite;
}
@keyframes bg
{
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment