Can I add a shadow to chart.js?

Question

I use chart.js to build a line chart. I was wondering if it is possible to add a shadow to the line chart that I am showing. To clarify, I want to add a shadow to the line itself. Like this:

Here are snippets of code and code.

 // Line Chart var ctx = document.getElementById("salesData").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 salesData = { labels: ["1", "2", "3", "4", "5", "6", "7", "8"], datasets: [ { label: "Front", fillColor: "rgba(0, 0, 0, 0)", strokeColor: gradient, pointColor: gradient, pointStrokeColor: "#202b33", pointHighlightStroke: "rgba(225,225,225,0.9)", data: [0, 10, 40, 48, 55, 64, 55, 72] } ] }; window.myLineChart = new Chart(ctx).Line(salesData, { pointDotRadius : 0, pointDotStrokeWidth : 0, datasetStrokeWidth : 4, scaleShowVerticalLines: true, scaleGridLineWidth : 2, scaleShowGridLines : true, scaleGridLineColor : "rgba(225, 255, 255, 0.02)", scaleOverride: true, scaleSteps: 12, scaleStepWidth: 10, scaleStartValue: 0, responsive: true }); 

 <script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script> <canvas id="salesData"></canvas> 

Answer 1

Expanding the graph and overriding the draw function would be one (complicated) way to do this.

A simple way would be to duplicate the chart canvas with all the other elements (grids, scale labels ...), style the line in different ways (thicker and grayer). Then position this duplicate canvas below and to the bottom and to the right of the original canvas.

CSS

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

HTML

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

Script

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

---

If your shadow is not blurry enough, you can add another layer

CSS

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

HTML

 <div class="shadowParent"> <canvas id="myChartShadow2" class="secondShadow" width="600"></canvas> ... 

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, }); 

Please note that the scale aligns with the first shadow (this gives it more 3D-feel), but you can move it to the first level if the scale is important (this looks more like a rough look of the graph)

---

Fiddle - http://jsfiddle.net/fjyj1021/

---

Answer 2

You can use filters:

  g.ct-series {filter:url(#shadow);} <defs> <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%"> <feDropShadow dx="2" dy="2" stdDeviation="6" flood-opacity="0.80" /> </filter> </defs>