Try the code below. Play around with values to get the result you exactly want. The below code will help you understand how to apply gradient to a line.
// Define two points which we will be using to construct
// the path and to position the gradient color:
var point1 = [0,350];
var point2 = [350, 0];
// Create a line between point1 and point2 points:
var path = new Path.Line({
from: point1,
to: point2,
// Fill the line stroke with a gradient of two color stops
strokeColor: {
gradient: {
stops: ['blue', 'red']
},
//origin and destination defines the direction of your gradient. In this case its vertical i.e bottom(blue/cooler) to up(red/warmer) refering to link you sent.
origin: [0,200], //gradient will start applying from y=200 towards y=0. Adjust this value to get your desired result
destination: [0,0]
},
strokeWidth: 5
});
Hope this makes things a bit easier for you.
Note: You can also change the percentage of blue and red in the gradient given above like this:
...
gradient: {
// blue from 0% to 33%, mix between blue and red from 33% to 66%, and remaining red (66% to 100%)
// mix between red and black from 20% to 100%:
stops: [['blue',0.33], ['red',0.66]]
},
origin: [0,350],
destination: [0,0],
...