Chartjs-How to make `fillColor` as gradient in chart.js?

1πŸ‘

βœ…

var ctx = document.getElementById("buyers").getContext("2d")
var gradient = ctx.createLinearGradient(0, 0, 0, 175);
gradient.addColorStop(0, "black");
gradient.addColorStop(1, "white");

 var buyerData = {

    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [{
      fillColor: gradient,
      strokeColor: "#813D7E",
      pointColor: "#813D7E",
      pointStrokeColor: "#9DB86D",
      data: [30, 40, 32, 90, 150, 20, 30, 50, 150, 100, 200, 250]
    }]
  }
  // get line chart canvas
  var buyers = document.getElementById('buyers').getContext('2d');
  // draw line chart
  new Chart(buyers).Line(buyerData);

Working fiddle

Learn more about createLinearGradient method

Hope this helped πŸ™‚

Leave a comment