From 789f0bf537fab153f1144461dc8107aadfe5f8aa Mon Sep 17 00:00:00 2001 From: Abhinandan-Kushwaha Date: Mon, 20 Jun 2022 19:11:16 +0530 Subject: [PATCH] Added gradients to stacked bar charts --- docs/BarChart/BarChartProps.md | 6 +++++- package.json | 2 +- src/BarChart/RenderStackBars.tsx | 36 +++++++++++++++++++++++++++++++- src/BarChart/index.tsx | 4 ++++ 4 files changed, 45 insertions(+), 3 deletions(-) diff --git a/docs/BarChart/BarChartProps.md b/docs/BarChart/BarChartProps.md index eaecd47..4862700 100644 --- a/docs/BarChart/BarChartProps.md +++ b/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 | ``` diff --git a/package.json b/package.json index d45c440..e329a15 100644 --- a/package.json +++ b/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": [ diff --git a/src/BarChart/RenderStackBars.tsx b/src/BarChart/RenderStackBars.tsx index be83a8e..1bef109 100644 --- a/src/BarChart/RenderStackBars.tsx +++ b/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; }; 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; 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 ? ( + + ) : null} {stackItem.innerBarComponent && stackItem.innerBarComponent()} ); diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx index 5aca467..cf96f75 100644 --- a/src/BarChart/index.tsx +++ b/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={