Gradient fill under line chart

Modified on Wed, 01 Dec 2021 at 10:36 AM

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

}

}

}