[Chartjs]-React chartjs: background gradient not appearing

by

0👍

✅

The 200 and 500 refers to pixel x/y positionings within the graph. It lets you decide at which axis location you want the gradient to start/stop. Here are the docs that tell you the meanings behind each value:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient

I have my linear gradient going from color on the top to transparent on the bottom. Here’s my implementation:

const gradient = context.chart.ctx.createLinearGradient(0, 0, 0, context.chart.chartArea.height);

In this example, I used my context.chart.chartArea.height to tell me the height of the canvas and I made it connect tot he top so that the gradient was over the whole background (ie super high values would have a bright color whereas low ones would be transparent on the fill).

Leave a comment