Gradients

There is no native support in Chart.js for gradients, but they are fairly easy to generate with Canvas. The problem is that a gradient has an absolute position in a Canvas object, while your chart may be responsive. If the chart is resized, the gradient has to be recalculated and the chart updated.

 

One way to deal with this is to call a gradient function as soon as the chart is created and every time the window is resized, feeding the Canvas gradient function with the dimensions of the area where the gradient will be applied. We can do this with a callback and the Chart.js update() function.

A gradient in Canvas is created with the following function:

canvasContext.createLinearGradient(x0, y0, x1, y1);

The gradient contains the equation of a perpendicular line. To create a linear gradient that varies along the y axis, we need to draw the line from the bottom of the chart to the top. That means that x0 = x1 = 0, y1 is the bottom of the chart, and y0 is the top. If we write a function...