<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/rozklad/pen/jaNrWW" />
<style class="cp-pen-styles">body {
background-color: #f3f5f7;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.card {
background-color: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 300px;
height: 375px;
border-radius: 10px;
overflow: hidden;
}
.card .about {
height: 225px;
padding: 20px;
box-sizing: border-box;
}
.card .about h3,
.card .about .lead {
font-weight: 300;
margin: 0;
}
.card .about h3 {
font-size: 24px;
}
.card .about .lead {
color: #aaa;
}
.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;
overflow: hidden;
opacity: 0.2;
font-size: 11px;
text-align: center;
line-height: 40px;
padding-top: 150px;
}
.axis .tick:hover {
opacity: 1;
background-color: rgba(255, 255, 255, 0.2);
}
.axis .tick .value {
transform: translateY(-40px);
transition: 0.3s transform;
position: absolute;
top: 20px;
color: #444;
border-radius: 2px;
width: 100%;
line-height: 20px;
}
.axis .tick:hover .value.value--this {
transform: translateY(0);
display: block;
}
.value.value--this {
color: #5555FF;
font-weight: bold;
}
</style></head><body>
<div class="card">
<!-- Custom information -->
<div class="about">
<h3>Chart.js</h3>
<p class="lead">Blend mode: multiply</p>
<div class="legends">
<div class="info">
<span class="legend legend--this"></span>
<p>This week</p>
</div>
<div class="info">
<span class="legend legend--prev"></span>
<p>Previous week</p>
</div>
</div>
</div>
<!-- Canvas for Chart.js -->
<canvas id="canvas"></canvas>
<!-- Custom Axis -->
<div class="axis">
<div class="tick">
MON
<span class="value value--this">24</span>
<span class="value value--prev">20</span>
</div>
<div class="tick">
TUE
<span class="value value--this">18</span>
<span class="value value--prev">22</span>
</div>
<div class="tick">
WED
<span class="value value--this">16</span>
<span class="value value--prev">30</span>
</div>
<div class="tick">
THU
<span class="value value--this">18</span>
<span class="value value--prev">22</span>
</div>
<div class="tick">
FRI
<span class="value value--this">24</span>
<span class="value value--prev">18</span>
</div>
<div class="tick">
SAT
<span class="value value--this">36</span>
<span class="value value--prev">22</span>
</div>
<div class="tick">
SUN
<span class="value value--this">28</span>
<span class="value value--prev">30</span>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js'></script>
<script >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: ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"],
datasets: [
{
label: 'This week',
data: [24, 18, 16, 18, 24, 36, 28],
backgroundColor: gradientThisWeek,
borderColor: 'transparent',
pointBackgroundColor: '#FFFFFF',
pointBorderColor: '#FFFFFF',
lineTension: 0.40,
},
{
label: 'Previous week',
data: [20, 22, 30, 22, 18, 22, 30],
backgroundColor: gradientPrevWeek,
borderColor: 'transparent',
pointBackgroundColor: '#FFFFFF',
pointBorderColor: '#FFFFFF',
lineTension: 0.40,
}
]
},
options: {
elements: {
point: {
radius: 0,
hitRadius: 5,
hoverRadius: 5
}
},
legend: {
display: false,
},
scales: {
xAxes: [{
display: false,
}],
yAxes: [{
display: false,
ticks: {
beginAtZero: true,
},
}]
}
},
plugins: [multiply],
};
window.chart = new Chart(canvas, config);
//# sourceURL=pen.js
</script>
</body></html>
