From 5a354ebe611f1f89331edebd8b99fb8f78f95811 Mon Sep 17 00:00:00 2001
From: Cleybert Andre <cleybertandre@gmail.com>
Date: Fri, 20 Sep 2019 15:15:33 -0300
Subject: [PATCH 1/2] added background opacity props

---
 src/abstract-chart.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/abstract-chart.js b/src/abstract-chart.js
index 878ca65d..76af47c8 100644
--- a/src/abstract-chart.js
+++ b/src/abstract-chart.js
@@ -189,6 +189,9 @@ class AbstractChart extends Component {
 
   renderDefs = config => {
     const {width, height, backgroundGradientFrom, backgroundGradientTo} = config
+    const fromOpacity = config.hasOwnProperty('backgroundGradientFromOpacity') ? config.backgroundGradientFromOpacity : 1.0;
+    const toOpacity = config.hasOwnProperty('backgroundGradientToOpacity') ? config.backgroundGradientToOpacity : 1.0;
+
     return (
       <Defs>
         <LinearGradient
@@ -198,8 +201,8 @@ class AbstractChart extends Component {
           x2={width}
           y2={0}
         >
-          <Stop offset="0" stopColor={backgroundGradientFrom} />
-          <Stop offset="1" stopColor={backgroundGradientTo} />
+          <Stop offset="0" stopColor={backgroundGradientFrom} stopOpacity={fromOpacity} />
+          <Stop offset="1" stopColor={backgroundGradientTo} stopOpacity={toOpacity} />
         </LinearGradient>
         <LinearGradient
           id="fillShadowGradient"

From 24e78956ec9a30ed27e4217e93a65c04d59887c8 Mon Sep 17 00:00:00 2001
From: Cleybert Andre <cleybertandre@gmail.com>
Date: Fri, 20 Sep 2019 15:17:41 -0300
Subject: [PATCH 2/2] updated README: added new opacity options
 'backgroundGradientFromOpacity' and 'backgroundGradientToOpacity'.

---
 README.md | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f47014ba..c18c4dc8 100644
--- a/README.md
+++ b/README.md
@@ -69,7 +69,9 @@ Define a chart style object with following properies as such:
 ```js
 const chartConfig = {
   backgroundGradientFrom: '#1E2923',
+  backgroundGradientFromOpacity: 0,
   backgroundGradientTo: '#08130D',
+  backgroundGradientToOpacity: 0.5,
   color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
   strokeWidth: 2 // optional, default 3
 }
@@ -78,7 +80,9 @@ const chartConfig = {
 | Property        | Type           | Description  |
 | ------------- |-------------| -----|
 | backgroundGradientFrom | string | Defines the first color in the linear gradient of a chart's background  |
+| backgroundGradientFromOpacity | Number | Defines the first color opacity in the linear gradient of a chart's background  |
 | backgroundGradientTo | string | Defines the second color in the linear gradient of a chart's background |
+| backgroundGradientToOpacity | Number | Defines the second color opacity in the linear gradient of a chart's background  |
 | color | function => string | Defines the base color function that is used to calculate colors of labels and sectors used in a chart |
 | strokeWidth | Number | Defines the base stroke width in a chart |
 
@@ -373,8 +377,12 @@ Render definitions of background and shadow gradients
   height: Number,
   // first color of background gradient
   backgroundGradientFrom: String,
+  // first color opacity of background gradient (0 - 1.0)
+  backgroundGradientFromOpacity: Number,
   // second color of background gradient
-  backgroundGradientTo: String
+  backgroundGradientTo: String,
+  // second color opacity of background gradient (0 - 1.0)
+  backgroundGradientToOpacity: Number,
 }
 ```