Gradient color in 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

Gradient color in Chart.js Line Chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>ChartJS Line Chart</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script> 
      <style id="compiled-css" type="text/css">

canvas {//from  w  w w .java  2  s.  c  om
   background-color: #eee;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var ctx = document.getElementById("myChart").getContext("2d");
grd = ctx.createLinearGradient(0.000, 350.000, 0.000, 100.000);
grd.addColorStop(0.000, 'rgba(0, 255, 0, 1.000)');
grd.addColorStop(0.200, 'rgba(191, 255, 0, 1.000)');
grd.addColorStop(0.400, 'rgba(221, 255, 0, 1.000)');
grd.addColorStop(0.600, 'rgba(255, 229, 0, 1.000)');
grd.addColorStop(0.800, 'rgba(255, 144, 0, 1.000)');
grd.addColorStop(1.000, 'rgba(255, 50, 0, 1.000)');
var data = {
  labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"],
  datasets: [{
    lineTension: 0.1,
    backgroundColor: grd,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    pointBorderColor: "rgba(75,192,192,1)",
    pointBackgroundColor: "#fff",
    pointBorderWidth: 1,
    pointHoverRadius: 5,
    pointHoverBackgroundColor: "rgba(75,192,192,1)",
    pointHoverBorderColor: "rgba(220,220,220,1)",
    pointHoverBorderWidth: 2,
    pointRadius: 1,
    pointHitRadius: 10,
    data: [0, 100, 250, 400, 400, 400, 500, 700, 900, 1000, 1000, 1300, 1300, 1100, 900, 700, 500, 300, 100, 0],
    spanGaps: false,
  }]
};
var myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          callback: function(value, index, values) {
            return value + '?';
          },
          mirror: true,
        },
        gridLines: {
          display: false,
          drawBorder: false,
        },
      }],
      xAxes: [{
        display: false,
        gridLines: {
          display: false
        }
      }]
    },
  },
});
    }

      </script> 
   </head> 
   <body>  
      <canvas id="myChart" width="600" height="400"></canvas>   
   </body>
</html>

Related Tutorials