Chartjs-Gradient is too blurred in Chart.js Line Chart

by

1👍

✅

It looks like you are setting the wrong start and end coordinates when you create the linear gradient.

This documentation may help you understand better what the coordinates should be set to:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient

Change both x coordinates to 0, to get straight horizontal lines. Then, decrease the start y and increase the end y to make the start and end colors more visible.

Code:

grd = ctx.createLinearGradient(0.000, 350.000, 0.000, 100.000);

Screenshot:
gradient

JSFiddle:
https://jsfiddle.net/xg2k82rp/3/

Leave a comment