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": {}
     }
   }
  }