Information
Two colors can be used for the gradient. Additionally to the color, the opacity can also be changed
- First colour "rgba(15,15,15, 1)" or "rgba(15,15,15)" → full opacity

- Second colour "rgba(15,15,15, 0)" → no opacity = white

Configuration
It is best to configure it directly within the JSON under "plotOptions":
"plotOptions": {
"series": {
"fillColor": {
"linearGradient": {
"x1": 0,
"y1": 0,
"x2": 0,
"y2": 1
},
"stops": [
[
0,
"rgba(0,0,51)"
],
[
1,
"rgba(0,0,51,0)"
]
]
},
"animation": false,
"dataLabels": {
"enabled": false
}
}
}
Using "linearGradient" the direction of the gradient can be adjusted. The parameters x1 to y2 decide at which side the first color will start: x1 = left, x2 = right, y1 = bottom, y2 = top.
Under "stops" the gradient colors and their opacity get defined. The first three parameters of rgba() determine the color. Opacity is defined by the fourth parameter: 0 = no opacity, 1 = full opacity. As 1 represents 100%, the degree of opacity can be changed using decimal places (e.g. 0.5).
The code above would create a gradient from top to bottom with the bottom being white.

JSON
{
"id": "timeschartkpiTimesElement",
"type": "highcharts",
"tempCustomSql": "SELECT round(avg(throughputtime),0) as throughputtime,
creationdate as day FROM (SELECT throughputtime, date_format(creationdate,
'yyyy-MM-dd') as creationdate FROM inputTable) as virtualTable
GROUP BY creationdate ORDER BY creationdate ASC",
"source": "casetableDatasource",
"config": {
"title": {
"text": ""
},
"subtitle": {
"text": "Timechart_GradientFilled"
},
"exporting": {},
"chart": {
"type": "area",
"polar": false,
"inverted": false
},
"series": [
{
"name": "throughputtime",
"turboThreshold": 0,
"marker": {}
}
],
"plotOptions": {
"series": {
"fillColor": {
"linearGradient": {
"x1": 0,
"y1": 0,
"x2": 0,
"y2": 1
},
"stops": [
[
0,
"rgba(0,0,51)"
],
[
1,
"rgba(0,0,51,0)"
]
]
},
"animation": false,
"dataLabels": {
"enabled": false
}
}
},
"legend": {
"enabled": false,
"verticalAlign": "bottom",
"align": "center",
"floating": false,
"layout": "horizontal",
"y": 0
},
"yAxis": {
"title": {
"text": "Time"
},
"labels": {}
},
"xAxis": {
"title": {
"text": ""
},
"labels": {}
}
}
}