Comments (3)
facing a similar issue, when I inspect I noticed that there is Svg that overly the whole graph lines area,
from react-native-gifted-charts.
import React, {useEffect, useState} from 'react';
import {
View,
Text,
useWindowDimensions,
TouchableOpacity,
Alert,
} from 'react-native';
import tw from '../../../lib/tailwind';
import {useDeviceContext} from 'twrnc';
import {LineChart} from 'react-native-gifted-charts';
import colors from '../../theme/colors';
import {ProductType} from '../../types';
import {dateFormat} from '../../utils';
import {useTranslation} from 'react-i18next';
import {DATE_FORMAT_2} from '../../constant/indext';
type ProductGraphProps = {
data: any;
averagePrice: number;
};
function ProductGraph(props: ProductGraphProps) {
const {data, averagePrice} = props;
const [graphData, setGraphData] = useState<ProductType[]>();
const [selectIndex, setSelectIndex] = useState<number>();
useDeviceContext(tw);
const customDataPoint = (index: number) => {
return (
<View
style={{
zIndex: 1,
position: 'relative',
}}>
<TouchableOpacity
onPress={() => {
Alert.alert('Sd');
}}
style={{
width: 40,
height: 40,
backgroundColor: colors.white,
borderWidth: 4,
borderRadius: 10,
borderColor: colors.primary,
zIndex: 999,
}}>
<Text>asd</Text>
</TouchableOpacity>
</View>
);
};
const customLabel = (val: string) => {
return (
<View style={{width: 70, marginLeft: 7}}>
<Text
style={{
color: 'black',
fontSize: 9,
marginLeft: 12,
}}>
{dateFormat(val, DATE_FORMAT_2)}
</Text>
</View>
);
};
const handleArrangeFilterData = () => {
let arr = data?.map((item: ProductType, index: number) => ({
value: item?.price,
labelComponent: () => customLabel(item?.purchaseDate),
customDataPoint: () => customDataPoint(index),
}));
return arr;
};
const {height, width} = useWindowDimensions();
const {t} = useTranslation();
return (
<View style={tw`flex-1 pb-6 w-full`}>
<View style={tw`w-full py-7 flex justify-center items-center`}>
<Text style={tw`text-xl text-black`}>{t('Average')}</Text>
{/* <Text style={tw`text-xs text-black font-medium`}>Febs, 12 2024 </Text> */}
<View style={tw`flex-row`}>
<Text style={tw`text-2xl text-green pt-3`}>
{averagePrice.toFixed(2)}
</Text>
</View>
</View>
<View style={tw`mt-auto`}>
<LineChart
onPress={() => {
Alert.alert('er');
}}
height={height - 440}
thickness={3}
width={width - 80}
color={'black'}
// maxValue={600}
areaChart
yAxisTextStyle={{color: 'black'}}
data={handleArrangeFilterData(data)}
curved
startFillColor={colors.primary}
endFillColor={colors.primary}
startOpacity={0.7}
endOpacity={0.4}
// spacing={38}
rulesColor={colors.alto}
rulesType="solid"
// initialSpacing={10}
yAxisColor={colors.alto}
xAxisColor={colors.alto}
/>
</View>
</View>
);
}
export default ProductGraph;
from react-native-gifted-charts.
Hi, I use v1.4.3 of the package. I have a question about the
onPress
functionality inLineChart
.I think it doesn't have an useful experience, because to press
dot
in the chart is very hard. I tried to usecustomDataPoint
prop and prepared a custom component withPressable
component in order to useonPress
. ButonPress
still didn't work.Apart from that, I also couldn't use
onPress
functionality with the chart texts in the X axis. Normally, when I useBarChart
and press the any text in X axis,onPress
is triggered. Why we don't use similar functionality withLineChart
?Also, I know that,
LineChart
has some props such asfocusEnabled
,onFocus
,onPress
to handle 'press' actions. But, as I said, I think the experience of the LineChart onPress events not good. I would be good if it has similar behaviour withBarChart
.Do you have any suggestion for that?
Did you figure it out?
from react-native-gifted-charts.
Related Issues (20)
- label overflow in barchart HOT 1
- Bug: Negative steps and values in in second y axis are incorrect position HOT 2
- Why the y axis of line chart is shifted up and some data cannot be displayed
- Bug: Min negative step in in left y axis is too long than expected HOT 1
- Having x label without values
- LineChart doesn't display lines of chart on Safari (iPhone) HOT 5
- show labels without having data point to respective label HOT 3
- Bug: Updating state inside pointerLabelComponent HOT 2
- PieChart & PieChartPro prop mismatch
- null or undefined value on line chart
- does this library use reanimated? HOT 2
- Charts rendering to many views and dragging performance HOT 2
- Controlling the boundaries of sections painted with sectionColors HOT 2
- LineChart animateOnDataChange crashing when data length is different from previous data HOT 2
- Data Pointer Selection not working HOT 3
- Render better bar charts HOT 1
- X-axis label is not showing correctly And The vertical grid lines is Incomplete
- YAxis values in Multple lines in LineChart not showing correct. HOT 1
- Misaligned external label in PieChart
- In the LineChart, the pointer line is only displayed in the positive area (above 0).
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-gifted-charts.