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

Question

Is there any way of drop shadow in Charts? I can't find any option to customize shadow in any kind of chart.

What I want is drop shadow on lines or bars in my graphs. But I think its not possible. Is there a way of defining filter:drop-shadow() or box-shadow manually in style sheet ?

UPDATE : The possible solution suggested to me is not working ! I copied and pasted the code provided as an example but throw the following error

Note : I am using the latest Chartbundle.js

Uncaught TypeError: Cannot read property 'extend' of undefined

    Chart.types.Line.extend({ 
    name: "LineAlt",
    initialize: function () {
    Chart.types.Line.prototype.initialize.apply(this, arguments);

    var ctx = this.chart.ctx;
    var originalStroke = ctx.stroke;
    ctx.stroke = function () {
      ctx.save();
      ctx.shadowColor = '#000';
      ctx.shadowBlur = 10;
      ctx.shadowOffsetX = 8;
      ctx.shadowOffsetY = 8;
      originalStroke.apply(this, arguments)
      ctx.restore();
    }
  }
});

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

var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx).LineAlt(data, {
  datasetFill: false
});

<canvas id="canvas"></canvas>

Possible duplicate of [Styling Bars and Lines with Chart.js](http://stackoverflow.com/questions/34273254/styling-bars-and-lines-with-chart-js) — Garfield, Jan 02 '17 at 12:18
i just copied and pasted the code provided with the example but it throw this error **Uncaught TypeError: (intermediate value).LineAlt is not a function** — Hammas, Jan 02 '17 at 12:48
and now it says **Uncaught TypeError: Cannot read property 'extend' of undefined** — Hammas, Jan 02 '17 at 12:51

score 0 · Answer 1 · answered Jan 02 '17 at 15:44

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/

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

1 Answers1