Add a drop shadow to chart.js line chart - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Line Chart

Description

Add a drop shadow to chart.js line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>line chart with ChartJS</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/master/Chart.min.js"></script> 
      <style id="compiled-css" type="text/css">

.shadowParent {/*from www . jav a 2 s.  c om*/
   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;
}
      </style> 
      <script type="text/javascript">
    window.onload=function(){
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,
});
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,
});
    }

      </script> 
   </head> 
   <body> 
      <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>  
   </body>
</html>

Related Tutorials