[Chartjs]-How to make the background color of the chart as gradient using Chart.js

by

3👍

✅

You can use the canvas "createLinearGradient" method.

Docs:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient,
https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient/addColorStop

Example: https://codepen.io/alexgill/pen/MWbjXOP

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(10,10,10,.2)');   
gradient.addColorStop(1, 'rgba(255,255,255,1)');


const data = {
  labels: ["day1", "day2", "day3", "day4", "day5", "day6"],
  datasets: [
    {
      label: "Your BMI",
      data: [28.3, 28, 27, 27.6, 25, 25.6],
      backgroundColor : gradient,
      borderColor: "rgba(152,222,217,0.2)"
    }
  ]
};

Leave a comment