readded labels to chart

This commit is contained in:
Nouman Tahir 2022-02-15 14:27:09 +05:00
parent 873646a596
commit 246cb066c4
3 changed files with 10 additions and 9 deletions
src
components/simpleChart
screens/coinDetails/children

View File

@ -7,9 +7,10 @@ interface CoinChartProps {
baseWidth:number,
chartHeight:number,
showLine:boolean,
showLabels?:boolean,
}
export const SimpleChart = ({data, baseWidth, chartHeight, showLine}:CoinChartProps) => {
export const SimpleChart = ({data, baseWidth, chartHeight, showLine, showLabels = false}:CoinChartProps) => {
const _chartWidth = baseWidth + baseWidth/(data.length -1)
const _chartBackgroundColor = EStyleSheet.value('$primaryLightBackground');
return (
@ -24,12 +25,11 @@ export const SimpleChart = ({data, baseWidth, chartHeight, showLine}:CoinChartPr
}}
width={_chartWidth} // from react-native
height={chartHeight}
withHorizontalLabels={false}
withHorizontalLabels={showLabels}
withVerticalLabels={false}
withHorizontalLines={false}
withDots={false}
withInnerLines={false}
chartConfig={{
backgroundColor:_chartBackgroundColor,
backgroundGradientFrom: _chartBackgroundColor,

View File

@ -1,6 +1,7 @@
import { TextStyle, ViewStyle } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
export const CHART_NEGATIVE_MARGIN = 12
export default EStyleSheet.create({
card: {
marginHorizontal:16,
@ -63,7 +64,8 @@ export default EStyleSheet.create({
chartContainer:{
height: 168,
marginTop: 16,
marginLeft:-66,
marginLeft:-CHART_NEGATIVE_MARGIN,
overflow: 'hidden',
} as ViewStyle
});

View File

@ -1,9 +1,7 @@
import React, { useEffect, useState } from 'react'
import { View, Text, Dimensions } from 'react-native'
import { LineChart } from 'react-native-chart-kit'
import EStyleSheet from 'react-native-extended-stylesheet'
import { View, Dimensions } from 'react-native'
import { SimpleChart } from '../../../components'
import styles from './children.styles'
import styles, { CHART_NEGATIVE_MARGIN } from './children.styles'
export const CoinChart = () => {
@ -28,7 +26,7 @@ export const CoinChart = () => {
}, [])
const _renderGraph = () => {
const _baseWidth = Dimensions.get("window").width - 32 + 66;
const _baseWidth = Dimensions.get("window").width - 32 + CHART_NEGATIVE_MARGIN;
return (
<View style={styles.chartContainer}>
<SimpleChart
@ -36,6 +34,7 @@ export const CoinChart = () => {
baseWidth={_baseWidth} // from react-native
chartHeight={200}
showLine={true}
showLabels={true}
/>
</View>
)}