data background color shadowing point background color in line chart - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

data background color shadowing point background color in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from   w  w w  . java  2  s.  c o m*/
var colors = [
    'rgb(28, 185, 135)',
    'rgb(185, 28, 78)',
    'rgb(28, 78, 185)',
    'rgb(191, 206, 28)',
    'rgb(191, 63, 191)'
    ];
var ctxLine = document.getElementById("lineChart").getContext('2d');
 lineChart = new Chart(ctxLine, {
 type: 'line',
 data: {
     xLabels: ['a','b','c','d','f','g','h'],
     datasets: [{
               label: 'Dataset',
           data: [1,2,3,4,5,6,7,8],
           //backgroundColor: "rgba(52,152,219,0.4)",
           pointRadius: 5
       }]
 },
 options: {
    elements: {
         point: {
              borderColor: "rgb(255,255,0)",
              backgroundColor: colors
          }
      }
   }
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="lineChart"></canvas>  
   </body>
</html>

Related Tutorials