Geek Answers Handbook

Highchart Area Range Graphics with Gradient Following Line

Below is an Area Range chart with a gradient.

http://jsfiddle.net/gXpHH/1/

I want to make the gradient follow the curve, so that the color at any point on the bottom line is the same, and ends with the same color when it reaches the top line. I'm pretty sure this is not an option in highcharts at the moment, but I just wanted to see if anyone had come across this before. Here is the code that the gradient is currently generating:

series: [{ name: "Shade", fillColor: { linearGradient: [0, 0, 0, 300], stops: [ [0, "#4572A7"], [1, "rgba(2,0,0,0)"] ] }, data: [ [0, 14733, 18890], [1, 16583, 21642], //... rest here [10, 42417, 61955] ] }]

thanks

Note : this is not the same as Highcharts , as I need a gradient to follow the curve.

+8
javascript jquery highcharts
source share
2 answers

The difficulty lies in detailing: Highcharts draws a single SVG path for the points in the series and associates this path with a gradient. If your series data is relatively linear, the following approximation may be useful. See the jsfiddle I created :

Assuming your series data is not static, my demo includes two series and a function that, for each series, tries to dynamically create a linear gradient that is closest to your requirement:

 function getLinearGradient(series) { var lastY0=null, lastY1=null, maxY0=null, maxY1=null; $.each(series.data, function(key,value) { maxY0 = Math.max(value[1],maxY0); maxY1 = Math.max(value[2],maxY1); lastY0 = value[1]; lastY1 = value[2]; }); var firstY0 = series.data[0][2], firstY1 = series.data[0][2] ; var minY0=maxY0, minY1=maxY1; $.each(series.data, function(key,value) { minY0 = Math.min(value[1],minY0); minY1 = Math.min(value[2],minY1); }); var minY = minY0, maxY = maxY1, heightY = maxY - minY ; var gradient = { x1: 10 + ( ((firstY0-minY) / heightY) * 80 ) + "%", y1: "10%", x2: 10 + ( ((lastY1-minY) / heightY) * 80 ) + "%", y2: "90%" }; return gradient; };

Of course, this approach is not a full-blown solution and is only useful if you are dealing with data that roughly follows a linear curve. Here jsfiddle

+5
source share

I don’t have a single example, and I don’t know exactly if it is in the specifications, but I’m sure that the only way to achieve this effect is to use svg mash gradients.

You can use the waypoints as boundary points for the burr matrix and get the desired effect.

See here for more details.

+2
source share

More articles:


All Articles