Color Gradient on Line

Learn how to apply a color gradient to the lines of your graph.

Applying a color gradient to a line based on value

I know that we were impressed with the changing dots in a scatter plot based on the value. But could we go one better?

How about we try to reproduce the same effect but by varying the colour of the plotted line. This is a neat feature and a useful example of the flexibility of D3.js and SVG in general.

Here is a plotted line that is red below 400, green above 620, and black in between.

Get hands-on with 1200+ tech skills courses.