Added barStyle to Bar and Stacked bar charts

docs/BarChart/BarChartProps.md

@@ -93,6 +93,7 @@ The properties of this line chart can be controlled using the `lineConfig` prop
 | sideColor              | ColorValue | Color of the side view of the bar, only for 3 D                                |
 | sideWidth              | number     | Width of the side view of the bar, only for 3 D                                |
 | topColor               | ColorValue | Color of the top view of the bar, only for 3 D                                 |
+| barStyle               | object     | style object for the Bars                                                      |
 | 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         |
 | label                  | string     | Label text appearing below the bar (under the X axis)                          |
@@ -110,7 +111,7 @@ The properties of this line chart can be controlled using the `lineConfig` prop
 | spacing                | number     | Distance of the next Bar from the currennt Bar                                 |
 | barBackgroundPattern   | Component  | A svg component containing the background pattern for bars                     |
 | patternId              | String     | ID of the pattern component                                                    | 
-| leftShiftForTooltip    | number     | The distance by which the tooltip component should shift towards left         |
+| leftShiftForTooltip    | number     | The distance by which the tooltip component should shift towards left          |
 
 ---
 
@@ -200,6 +201,7 @@ type referenceConfigType = {
 | Prop            | Type       | Description                                                                | Default value            |
 | --------------- | ---------- | -------------------------------------------------------------------------- | ------------------------ |
 | barWidth        | number     | Width of the bar                                                           | 30                       |
+| barStyle        | object     | style object for the Bars                                                  | \_                       |
 | isThreeD        | Boolean    | Prop to render 3 dimensional bars                                          | false                    |
 | frontColor      | ColorValue | Color of the bar                                                           | black for 2D, red for 3D |
 | sideColor       | ColorValue | Color of the side view of the bar, only for 3 D                            | red                      |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.2.38",
+  "version": "1.2.39",
   "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/Animated2DWithGradient.tsx

@@ -39,6 +39,7 @@ type propTypes = {
   barBackgroundPattern?: Function;
   patternId?: String;
   barMarginBottom?: number;
+  barStyle?: object;
 };
 type itemType = {
   value?: number;
@@ -61,6 +62,7 @@ type itemType = {
   barBackgroundPattern?: Function;
   patternId?: String;
   barMarginBottom?: number;
+  barStyle?: object;
 };
 
 const Animated2DWithGradient = (props: propTypes) => {
@@ -68,6 +70,7 @@ const Animated2DWithGradient = (props: propTypes) => {
     barBackgroundPattern,
     patternId,
     barWidth,
+    barStyle,
     item,
     opacity,
     animationDuration,
@@ -128,17 +131,20 @@ const Animated2DWithGradient = (props: propTypes) => {
                 : height) - (barMarginBottom || 0),
           }}>
           <View
-            style={{
+            style={[
-              width: '100%',
+              {
-              height:
+                width: '100%',
-                (noAnimation
+                height:
-                  ? Math.max(
+                  (noAnimation
-                      props.minHeight,
+                    ? Math.max(
-                      (Math.abs(item.value) * (containerHeight || 200)) /
+                        props.minHeight,
-                        (maxValue || 200),
+                        (Math.abs(item.value) * (containerHeight || 200)) /
-                    )
+                          (maxValue || 200),
-                  : height) - (barMarginBottom || 0),
+                      )
-            }}>
+                    : height) - (barMarginBottom || 0),
+              },
+              item.barStyle || barStyle,
+            ]}>
             {noGradient ? (
               <View
                 style={[

src/BarChart/RenderBars.tsx

@@ -69,6 +69,7 @@ type Props = {
   initialSpacing: number;
   selectedIndex: number;
   setSelectedIndex: Function;
+  barStyle?: object;
 };
 type itemType = {
   value?: number;
@@ -97,6 +98,7 @@ type itemType = {
   patternId?: String;
   barMarginBottom?: number;
   leftShiftForTooltip?: number;
+  barStyle?: object;
 };
 const RenderBars = (props: Props) => {
   const {
@@ -109,6 +111,7 @@ const RenderBars = (props: Props) => {
     propSpacing,
     side,
     data,
+    barStyle,
     // oldValue,
 
     isThreeD,
@@ -419,6 +422,8 @@ const RenderBars = (props: Props) => {
               patternId={item.patternId || props.patternId}
               topLabelContainerStyle={item.topLabelContainerStyle}
               width={item.barWidth || props.barWidth || 30}
+              barStyle={barStyle}
+              item={item}
               sideWidth={
                 item.sideWidth ||
                 props.sideWidth ||
@@ -457,6 +462,8 @@ const RenderBars = (props: Props) => {
                 props.sideWidth ||
                 (item.barWidth || props.barWidth || 30) / 2
               }
+              barStyle={barStyle}
+              item={item}
               side={side || 'left'}
               frontColor={item.frontColor || props.frontColor || ''}
               sideColor={item.sideColor || props.sideColor || ''}
@@ -482,6 +489,7 @@ const RenderBars = (props: Props) => {
               barBackgroundPattern={props.barBackgroundPattern}
               patternId={props.patternId}
               barWidth={props.barWidth}
+              barStyle={barStyle}
               item={item}
               opacity={opacity}
               animationDuration={animationDuration || 800}
@@ -514,6 +522,7 @@ const RenderBars = (props: Props) => {
             barBackgroundPattern={props.barBackgroundPattern}
             patternId={props.patternId}
             barWidth={props.barWidth}
+            barStyle={barStyle}
             item={item}
             opacity={opacity}
             animationDuration={animationDuration || 800}
@@ -544,6 +553,7 @@ const RenderBars = (props: Props) => {
             barBackgroundPattern={props.barBackgroundPattern}
             patternId={props.patternId}
             barWidth={props.barWidth}
+            barStyle={barStyle}
             item={item}
             opacity={opacity}
             animationDuration={animationDuration || 800}

src/BarChart/index.tsx

@@ -146,6 +146,7 @@ type PropTypes = {
   renderTooltip?: Function;
   leftShiftForTooltip?: number;
   leftShiftForLastIndexTooltip?: number;
+  barStyle?: object;
 };
 type lineConfigType = {
   initialSpacing?: number;
@@ -200,6 +201,7 @@ type itemType = {
   spacing?: number;
   barBackgroundPattern?: Function;
   patternId?: String;
+  barStyle?: object;
 };
 
 export const BarChart = (props: PropTypes) => {
@@ -1619,6 +1621,7 @@ export const BarChart = (props: PropTypes) => {
                   initialSpacing={initialSpacing}
                   selectedIndex={selectedIndex}
                   setSelectedIndex={setSelectedIndex}
+                  barStyle={props.barStyle}
                 />
               ))}
         </Fragment>

src/Components/AnimatedBar/index.tsx

@@ -40,6 +40,8 @@ type animatedBarPropTypes = {
   intactTopLabel: Boolean;
   barBackgroundPattern?: Function;
   patternId?: String;
+  barStyle?: object;
+  item: any;
 };
 
 const TriangleCorner = (props: trianglePropTypes) => {
@@ -105,8 +107,7 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
     setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
   };
 
-  const width = props.width;
+  const {item, width, sideWidth, barStyle} = props;
-  const sideWidth = props.sideWidth;
 
   const {barBackgroundPattern, patternId} = props;
 
@@ -193,7 +194,7 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
           ) : null}
 
           <View
-            style={{
+            style={[{
               width: width,
               height: height, //animatedHeight
               backgroundColor: frontColor,
@@ -201,7 +202,9 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
               borderTopWidth: StyleSheet.hairlineWidth,
               borderColor: 'white',
               opacity: opacity,
-            }}>
+            },
+            item.barStyle || barStyle
+            ]}>
             {showGradient && (
               <LinearGradient
                 style={{position: 'absolute', width: '100%', height: '100%'}}

src/Components/ThreeDBar/index.tsx

@@ -24,6 +24,8 @@ type PropTypes = {
   value: number;
   barBackgroundPattern?: Function;
   patternId?: String;
+  barStyle?: object;
+  item?: any;
 };
 
 type TriangleProps = {
@@ -60,8 +62,16 @@ const aStyles = StyleSheet.create({
 });
 
 const ThreeDBar = (props: PropTypes) => {
-  const {width, sideWidth, height, value, barBackgroundPattern, patternId} =
+  const {
-    props;
+    width,
+    sideWidth,
+    height,
+    value,
+    barBackgroundPattern,
+    patternId,
+    barStyle,
+    item,
+  } = props;
 
   const showGradient = props.showGradient || false;
   const gradientColor = props.gradientColor || 'white';
@@ -135,15 +145,18 @@ const ThreeDBar = (props: PropTypes) => {
           </View>
 
           <View
-            style={{
+            style={[
-              width: width,
+              {
-              height: height,
+                width: width,
-              backgroundColor: frontColor,
+                height: height,
-              borderLeftWidth: StyleSheet.hairlineWidth,
+                backgroundColor: frontColor,
-              borderTopWidth: StyleSheet.hairlineWidth,
+                borderLeftWidth: StyleSheet.hairlineWidth,
-              borderColor: 'white',
+                borderTopWidth: StyleSheet.hairlineWidth,
-              opacity: opacity,
+                borderColor: 'white',
-            }}>
+                opacity: opacity,
+              },
+              item.barStyle || barStyle,
+            ]}>
             {showGradient && (
               <LinearGradient
                 style={{position: 'absolute', width: '100%', height: '100%'}}