Merge pull request apexcharts#3122 from lf94/gradient-line-area

Add ability to use gradient fill on line and area at the same time

Author: junedchhipa

package-lock.json

@@ -334,11 +334,18 @@ class Line {
     if (w.config.stroke.show && !this.pointsChart) {
       let lineFill = null
       if (type === 'line') {
-        // fillable lines only for lineChart
         lineFill = fill.fillPath({
           seriesNumber: realIndex,
           i
         })
+      } else if (w.config.stroke.fill) {
+        const prevFill = w.config.fill
+        w.config.fill = w.config.stroke.fill
+        lineFill = fill.fillPath({
+          seriesNumber: realIndex,
+          i
+        })
+        w.config.fill = prevFill
       } else {
         lineFill = w.globals.stroke.colors[realIndex]
       }

src/charts/Line.js

@@ -330,7 +330,18 @@ export default class Defaults {
   area() {
     return {
       stroke: {
-        width: 4
+        width: 4,
+        fill: {
+          type: 'solid',
+          gradient: {
+            inverseColors: false,
+            shade: 'light',
+            type: 'vertical',
+            opacityFrom: 0.65,
+            opacityTo: 0.5,
+            stops: [0, 100, 100]
+          }
+        }
       },
       fill: {
         type: 'gradient',

src/modules/settings/Defaults.js

@@ -876,7 +876,23 @@ export default class Options {
         lineCap: 'butt', // round, butt , square
         width: 2,
         colors: undefined, // array of colors
-        dashArray: 0 // single value or array of values
+        dashArray: 0, // single value or array of values
+        fill: {
+          type: 'solid',
+          colors: undefined, // array of colors
+          opacity: 0.85,
+          gradient: {
+            shade: 'dark',
+            type: 'horizontal',
+            shadeIntensity: 0.5,
+            gradientToColors: undefined,
+            inverseColors: true,
+            opacityFrom: 1,
+            opacityTo: 1,
+            stops: [0, 50, 100],
+            colorStops: []
+          }
+        }
       },
       tooltip: {
         enabled: true,