status-im/react-native-gifted-charts
2
0
Fork 0
mirror of https://github.com/status-im/react-native-gifted-charts.git synced 2025-02-22 08:38:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added indicatorColor and xAxisType to Bar and Line charts

Browse Source
This commit is contained in:
Abhinandan-Kushwaha 2022-05-29 20:35:43 +05:30
parent 646817e770
commit 889e37abec
5 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/BarChart/BarChartProps.md
View File

@ -20,6 +20,7 @@
| backgroundColor | ColorValue | Background color of the Bar chart | \_ |
| disableScroll | Boolean | 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 |
| lineData | Array of items | The data object for the line chart (use only when showLine is true) | data |
| lineConfig | lineConfigType | Properties of the Line chart shown over the Bar chart (lineConfigType) is described below | defaultLineConfig |
@ -117,6 +118,7 @@ The properties of this line chart can be controlled using the `lineConfig` prop
| xAxisThickness | number | X axis thickness | 1 |
| yAxisColor | ColorValue | Y axis color | black |
| yAxisThickness | number | Y axis thickness | 1 |
| xAxisType | String | solid or dotted/dashed | solid |
| yAxisLabelWidth | number | Width of the Y axis Label container | 35 |
| yAxisTextStyle | object | Style object for the Y axis text style | \_ |
| yAxisTextNumberOfLines | number | Number of lines for y axis label text | 1 |

2
docs/LineChart/LineChartProps.md
View File

@ -20,6 +20,7 @@
| backgroundColor | ColorValue | Background color of the Bar chart | \_ |
| disableScroll | Boolean | 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 |
| isAnimated | Boolean | To show animated Line or Area Chart. Animation occurs when the chart load for the first time | false |
| animateOnDataChange | Boolean | To show animation on change in data. A smooth transition takes place between the iold and new line | false |
| onDataChangeAnimationDuration | number | Duration (milliseconds) in which the transition animation takes place on a change in data | 400 |
@ -95,6 +96,7 @@ When you are using the `dataPointLabelComponent`, make sure to provide the `data
| ---------------------- | ------------------- | ---------------------------------------------------------------------------------- | ---------------------- |
| xAxisColor | ColorValue | X axis color | black |
| xAxisThickness | number | X axis thickness | 1 |
| xAxisType | String | solid or dotted/dashed | solid |
| yAxisColor | ColorValue | Y axis color | black |
| yAxisThickness | number | Y axis thickness | 1 |
| yAxisLabelWidth | number | Width of the Y axis Label container | 35 |

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-native-gifted-charts",
"version": "1.2.29",
"version": "1.2.30",
"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": [

20
src/BarChart/index.tsx
View File

@ -44,6 +44,7 @@ type PropTypes = {
xAxisColor?: ColorValue;
yAxisThickness?: number;
yAxisColor?: ColorValue;
xAxisType?: String;
yAxisLabelContainerStyle?: any;
horizontalRulesStyle?: any;
yAxisTextStyle?: any;
@ -103,6 +104,7 @@ type PropTypes = {
disableScroll?: Boolean;
showScrollIndicator?: Boolean;
indicatorColor?: 'black' | 'default' | 'white';
roundedTop?: Boolean;
roundedBottom?: Boolean;
disablePress?: boolean;
@ -402,6 +404,7 @@ export const BarChart = (props: PropTypes) => {
const hideOrigin = props.hideOrigin || false;
const rulesType = props.rulesType || 'line';
const xAxisType = props.xAxisType || 'solid';
const dashWidth = props.dashWidth === 0 ? 0 : props.dashWidth || 4;
const dashGap = props.dashGap === 0 ? 0 : props.dashGap || 8;
@ -715,11 +718,17 @@ export const BarChart = (props: PropTypes) => {
{backgroundColor: backgroundColor},
]}>
{index === noOfSections ? (
<View
style={[
styles.lastLine,
{height: xAxisThickness, backgroundColor: xAxisColor},
]}
<Rule
config={{
thickness: xAxisThickness,
color: xAxisColor,
width: horizontal
? props.width || Math.min(300, totalWidth)
: (props.width || totalWidth) + 11,
dashWidth: dashWidth,
dashGap: dashGap,
type: xAxisType,
}}
/>
) : hideRules ? null : (
<Rule
@ -1379,6 +1388,7 @@ export const BarChart = (props: PropTypes) => {
!props.width && {width: totalWidth},
]}
showsHorizontalScrollIndicator={showScrollIndicator}
indicatorStyle={props.indicatorColor}
horizontal
// data={props.stackData || data}
keyExtractor={(item, index) => index.toString()}>

18
src/LineChart/index.tsx
View File

@ -71,6 +71,7 @@ type propTypes = {
animateTogether?: boolean;
xAxisThickness?: number;
xAxisColor?: ColorValue;
xAxisType?: String;
hideRules?: Boolean;
rulesColor?: ColorValue;
rulesThickness?: number;
@ -119,6 +120,7 @@ type propTypes = {
disableScroll?: Boolean;
pointerConfig?: Pointer;
showScrollIndicator?: Boolean;
indicatorColor?: 'black' | 'default' | 'white';
//Indices
@ -1554,6 +1556,7 @@ export const LineChart = (props: propTypes) => {
const hideOrigin = props.hideOrigin || false;
const rulesType = props.rulesType || 'line';
const xAxisType = props.xAxisType || 'solid';
const dashWidth = props.dashWidth === 0 ? 0 : props.dashWidth || 4;
const dashGap = props.dashGap === 0 ? 0 : props.dashGap || 8;
@ -1855,11 +1858,15 @@ export const LineChart = (props: propTypes) => {
},
]}>
{index === noOfSections ? (
<View
style={[
styles.lastLine,
{height: xAxisThickness, backgroundColor: xAxisColor},
]}
<Rule
config={{
thickness: xAxisThickness,
color: xAxisColor,
width: (props.width || totalWidth) + 11,
dashWidth: dashWidth,
dashGap: dashGap,
type: xAxisType,
}}
/>
) : hideRules ? null : (
<Rule
@ -3287,6 +3294,7 @@ export const LineChart = (props: propTypes) => {
}
}}
showsHorizontalScrollIndicator={showScrollIndicator}
indicatorStyle={props.indicatorColor}
style={[
{
marginLeft: