Chartjs with drop shadow

by andyjh07

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<div class="shadowParent">
    <canvas id="myChartHighlight" class="highlight"></canvas>
    <canvas id="myChartShadow" class="firstShadow"></canvas>
    <canvas id="myChart"></canvas>
</div>

SCSS

body {
    background: #202B33;
}

.shadowParent {
    position: relative;
    max-width:1300px;
    
    canvas {
        &.firstShadow {
            position: absolute;
            left: 10px;
            top: 30px;
            -webkit-filter: blur(10px);
            -moz-filter: blur(10px);
            -o-filter: blur(10px);
            -ms-filter: blur(10px);
            filter: blur(10px);
            filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
            z-index: -1;
            
            .no-cssfilters & {
                display: none;
            }
        }
        
        &.highlight {
            position: absolute;
            left: 0px;
            top: -2px;
            z-index: 1;
        }
    }
}

JavaScript

var ctx = document.getElementById("myChart").getContext("2d");

var gradient = ctx.createLinearGradient(0,0,700,0);
    gradient.addColorStop(0, 'rgba(255, 204, 128, 1)');   
    gradient.addColorStop(0.5, 'rgba(255, 152, 0, 1)');
    gradient.addColorStop(1, 'rgba(239, 108, 0, 1)');

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(151,187,205,0.2)",
        pointStrokeColor: "rgba(0,0,0,0)",
        pointHighlightFill: "rgba(0,0,0,0)",
        pointHighlightStroke: "rgba(151,187,205,1)",
        strokeColor: gradient,
        pointColor: gradient,
        data: [10, 18, 40, 48, 55, 64, 130]
    }]
};

var myLineChart = new Chart(ctx).Line(data, {
    pointDotRadius : 3.7,
    pointDotStrokeWidth : 0,
    datasetStrokeWidth : 8,
    scaleGridLineColor : "rgba(225, 255, 255, 0.02)",
    scaleShowGridLines: true,
    datasetFill: false,
    responsive: true
});

var ctxShadow = document.getElementById("myChartShadow").getContext("2d");
var dataShadow = JSON.parse(JSON.stringify(data));
dataShadow.datasets[0].strokeColor = "rgba(0,0,0,0.5)"
new Chart(ctxShadow).Line(dataShadow, {
    datasetStrokeWidth: 10,
    datasetFill: false,
    pointDot: false,
    showTooltips: false,
    scaleShowGridLines: false,
    scaleFontColor: "rgba(0,0,0,0)",
    scaleLineColor: "rgba(0,0,0,0)",
    responsive: true
});

var ctxHighlight = document.getElementById("myChartHighlight").getContext("2d");
var dataHighlight = JSON.parse(JSON.stringify(data));
dataHighlight.datasets[0].strokeColor = "rgba(255,255,255,0.5)"
new Chart(ctxHighlight).Line(dataHighlight, {
    pointDotRadius : 3,
    datasetStrokeWidth: 3,
    datasetFill: false,
    pointDot: false,
    showTooltips: false,
    scaleShowGridLines: false,
    scaleFontColor: "rgba(0,0,0,0)",
    scaleLineColor: "rgba(0,0,0,0)",
    responsive: true
});