score:1

Accepted answer

backgroundcolor with createlineargradient should help here. backgroundcolor propertly takes in different types of colors. you need to create a gradient and specify the same.

have created a sample snippet for you reusing your code. follow lines 4-7 and line 34.

const ctx = document.getelementbyid("mychart");

// create gradient here
const ctxforgradient = document.getelementbyid('mychart').getcontext('2d');
const gradientfill = ctxforgradient.createlineargradient(0, 500, 0, 50);
gradientfill.addcolorstop(0, "rgba(255, 0, 0, 0.9)");
gradientfill.addcolorstop(1, "rgba(0, 0, 255, 0.9)");

var speeddata = {
  labels: [
    "jan",
    "feb",
    "mar",
    "apr",
    "may",
    "jun",
    "jul",
    "aug",
    "sep",
    "oct",
    "nov",
    "dec"
  ],

  datasets: [{
    label: "car speed",
    data: [7, 9, 5, 8, 9, 7, 6, 10, 4, 5, 7, 8, 9],
    linetension: 0,
    pointbackgroundcolor: "#131921",
    pointbordercolor: "white",
    pointborderwidth: 3,
    pointradius: 6,
    bordercolor: "white",
    backgroundcolor: gradientfill // fill gradient here
  }]
};

var chartoptions = {
  legend: {
    display: false
  }
};
new chart(ctx, {
  type: "line",
  data: speeddata,
  options: chartoptions
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="mychart"></canvas>

hope it helps. revert for any doubts/clarification.


Related Query

More Query from same tag