Added gradients to stacked bar charts

docs/BarChart/BarChartProps.md

@@ -19,7 +19,7 @@
 | stepHeight          | number         | Height of 1 step/section in the Y axis                                                    | 20                  |
 | spacing             | number         | Distance between 2 consecutive bars in the Bar chart                                      | 20                  |
 | backgroundColor     | ColorValue     | Background color of the Bar chart                                                         | \_                  |
-| disableScroll       | Boolean        | To disable horizontal scroll                                                              | false               |
+| disableScroll       | B        | To disable horizontal scroll                                                              | false               |
 | showScrollIndicator | Boolean        | To show horizontal scroll indicator                                                       | false               |
 | indicatorColor      | String         | (iOS only) The color of the scroll indicators - ('black', 'white' or 'default')           | default             |
 | showLine            | Boolean        | To show a Line chart over the Bar chart with the same data                                | false               |
@@ -299,6 +299,8 @@ The value corresponding to the stacks key is an array of objects, each object re
 | --------- | --------------------- | -------------------------------------------------------------------------------------------- | ------------- |
 | stackData | Array of stack arrays | A stack array represents a stack of bars in the bar chart. It is described in the next table | false         |
 
+**Note** The `frontColor` prop is replaced by `color` prop in Stacked Bar charts.
+
 ### Stack Array description
 
 | Key            | Value type                                                | Description                                                                  |
@@ -324,6 +326,8 @@ A single stack item can be depicted as-
 | borderTopRightRadius    | number     | borderTopRightRadius for a stack section                |
 | borderBottomLeftRadius  | number     | borderBottomLeftRadius for a stack section              |
 | borderBottomRightRadius | number     | borderBottomRightRadius for a stack section             |
+| showGradient            | Boolean    | Prop to enable linear gradient for the bar color, defaults to false |
+| gradientColor          | ColorValue | Along with frontColor, this prop constitutes the 2 colors for gradient         |
 
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.2.34",
+  "version": "1.2.35",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [

src/BarChart/RenderStackBars.tsx

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import {View, TouchableOpacity, Text, ColorValue} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
 import {Style} from 'util';
 
@@ -41,6 +42,8 @@ type Props = {
   selectedIndex: number;
   setSelectedIndex: Function;
   activeOpacity: number;
+  showGradient?: Boolean;
+  gradientColor?: any;
   stackData: Array<itemType>;
 };
 type itemType = {
@@ -53,6 +56,9 @@ type itemType = {
   topLabelComponent?: Function;
   topLabelContainerStyle?: any;
   disablePress?: any;
+  color?: ColorValue;
+  showGradient?: Boolean;
+  gradientColor?: any;
   capThickness?: number;
   capColor?: ColorValue;
   capRadius?: number;
@@ -60,6 +66,7 @@ type itemType = {
   borderRadius?: number;
   stacks?: Array<any>;
   barBackgroundPattern?: Function;
+  barBorderRadius?: Number;
   patternId?: String;
 };
 const RenderStackBars = (props: Props) => {
@@ -179,7 +186,7 @@ const RenderStackBars = (props: Props) => {
                       (Math.abs(stackItem.value) * (containerHeight || 200)) /
                         (maxValue || 200) -
                       (stackItem.marginBottom || 0),
-                    backgroundColor: stackItem.color || 'black',
+                    backgroundColor: stackItem.color || props.color || 'black',
                     borderRadius:
                       stackItem.borderRadius || props.barBorderRadius || 0,
                   },
@@ -193,6 +200,33 @@ const RenderStackBars = (props: Props) => {
                         stackItem.borderBottomRightRadius || 0,
                     },
                 ]}>
+                {stackItem.showGradient ||
+                item.showGradient ||
+                props.showGradient ? (
+                  <LinearGradient
+                    style={[
+                      {
+                        position: 'absolute',
+                        width: '100%',
+                        height: '100%',
+                        borderRadius:
+                          stackItem.barBorderRadius ||
+                          item.barBorderRadius ||
+                          props.barBorderRadius ||
+                          0,
+                      },
+                    ]}
+                    start={{x: 0, y: 0}}
+                    end={{x: 0, y: 1}}
+                    colors={[
+                      stackItem.gradientColor ||
+                        item.gradientColor ||
+                        props.gradientColor ||
+                        'white',
+                      stackItem.color || item.color || props.color || 'black',
+                    ]}
+                  />
+                ) : null}
                 {stackItem.innerBarComponent && stackItem.innerBarComponent()}
               </TouchableOpacity>
             );

src/BarChart/index.tsx

@@ -113,6 +113,7 @@ type PropTypes = {
   disablePress?: boolean;
 
   frontColor?: ColorValue;
+  color?: ColorValue;
   sideColor?: ColorValue;
   topColor?: ColorValue;
   gradientColor?: ColorValue;
@@ -1521,6 +1522,9 @@ export const BarChart = (props: PropTypes) => {
                     horizontal={horizontal}
                     intactTopLabel={intactTopLabel}
                     barBorderRadius={props.barBorderRadius}
+                    color={props.color}
+                    showGradient={props.showGradient}
+                    gradientColor={props.gradientColor}
                     barBackgroundPattern={props.barBackgroundPattern}
                     patternId={props.patternId}
                     label={