Chartjs-How to filter shadow or Drop Shadow in Chart.js?

by

0👍

Here is the working sample code.

HTML:

<div class="shadowParent">
  <canvas id="myChartShadow2" class="secondShadow" width="600"></canvas>
  <canvas id="myChartShadow" class="firstShadow" width="600"></canvas>
  <canvas id="myChart" width="600"></canvas>
</div>


var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: "My First dataset",
    fillColor: "rgba(151,187,205,0.2)",
    strokeColor: "rgba(151,187,205,1)",
    pointColor: "rgba(151,187,205,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(151,187,205,1)",
    data: [65, 59, 80, 81, 56, 55, 40]
  }]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, {
  datasetStrokeWidth: 5,
  scaleFontColor: "rgba(0,0,0,0)",
  scaleLineColor: "rgba(0,0,0,0)",
  scaleShowGridLines: false,
  datasetFill: false,
});

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

Script: 

var ctxShadow2 = document.getElementById("myChartShadow2").getContext("2d");
var dataShadow2 = JSON.parse(JSON.stringify(data));
dataShadow2.datasets[0].strokeColor = "rgba(220,220,220,0.1)"
new Chart(ctxShadow2).Line(dataShadow2, {
  datasetStrokeWidth: 20,
  datasetFill: false,
  pointDot: false,
  showTooltips: false,
  scaleFontColor: "rgba(0,0,0,0)",
  scaleLineColor: "rgba(0,0,0,0)",
  scaleShowGridLines: false,
  datasetFill: false,
});

CSS

.shadowParent {
  position: relative;
}

.shadowParent canvas.firstShadow {
  position: absolute;
  left: 10px;
  top: 30px;
  z-index: -1;
}

.shadowParent canvas.secondShadow {
  position: absolute;
  left: 10px;
  top: 30px;
  z-index: -1;
}

Fiddle – http://jsfiddle.net/eafxLd55/

Leave a comment