Added gradients to stacked bar charts
This commit is contained in:
Abhinandan-Kushwaha
parent
fe7f219b0e
commit
789f0bf537
|
|
@ -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 |
|
||||
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -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": [
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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={
|
||||
|
|
|
|||
Loading…
Reference in New Issue