status-im
/
react-native-gifted-charts
mirror of https://github.com/status-im/react-native-gifted-charts.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added custom dataPointLabel in Line chart and refactored Line chart code

This commit is contained in:
Abhinandan Kushwaha 2021-12-04 00:01:42 +05:30
parent 0825628968
commit 3ec7ebfe09
5 changed files with 379 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
App.js
View File

@ -6,7 +6,111 @@ import {BarChart, LineChart} from './src';
const App = () => {
const [toggle, setToggle] = useState(true);
const dPoint = () => {
return (
<View
style={{
width: 20,
height: 20,
backgroundColor: 'white',
borderWidth: 4,
borderRadius: 10,
borderColor: '#07BAD1',
}}
/>
);
};
const lcomp = val => {
return (
<View style={{width: 70, marginLeft: 7}}>
<Text style={{color: 'white', fontWeight: 'bold'}}>{val}</Text>
</View>
);
};
const latestData = [
{
value: 100,
labelComponent: () => lcomp('22 Nov'),
customDataPoint: dPoint,
},
{
value: 140,
hideDataPoint: true,
},
{
value: 250,
customDataPoint: dPoint,
},
{
value: 290,
hideDataPoint: true,
},
{
value: 410,
labelComponent: () => lcomp('24 Nov'),
customDataPoint: dPoint,
showStrip: true,
stripHeight: 190,
stripColor: 'black',
dataPointLabelComponent: () => {
return (
<View
style={{
backgroundColor: 'black',
paddingHorizontal: 8,
paddingVertical: 5,
borderRadius: 4,
}}>
<Text style={{color: 'white'}}>410</Text>
</View>
);
},
dataPointLabelShiftY: -70,
dataPointLabelShiftX: -14,
},
{
value: 440,
hideDataPoint: true,
},
{
value: 300,
customDataPoint: dPoint,
},
{
value: 280,
hideDataPoint: true,
},
{
value: 180,
labelComponent: () => lcomp('26 Nov'),
customDataPoint: dPoint,
},
{
value: 150,
hideDataPoint: true,
},
{
value: 150,
customDataPoint: dPoint,
},
];
const customLabel = val => {
return (
<View
style={{
backgroundColor: 'black',
// padding: 16,
borderRadius: 8,
width: 30,
paddingVertical: 4,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{color: 'white'}}>{val}</Text>
</View>
);
};
const [data, setData] = useState([
{value: 15, label: 'Jan'},
{
@ -15,17 +119,28 @@ const App = () => {
verticalLineColor: 'red',
// showVerticalLine: true,
verticalLineThickness: StyleSheet.hairlineWidth,
dataPointLabelComponent: () => customLabel(40),
},
{
value: 10,
label: 'Mar',
dataPointLabelComponent: () => customLabel(10),
},
{
value: 30,
label: 'Apr',
dataPointLabelComponent: () => customLabel(30),
},
{
value: 20,
label: 'May',
dataPointLabelComponent: () => customLabel(20),
},
{
value: 40,
label: 'Jun',
focusedDataPointLabelComponent: () => customLabel(40),
},
{value: 20, label: 'May'},
{value: 40, label: 'Jun'},
{value: 48, label: 'Jul'},
{value: 30, label: 'Aug'},
{value: 20, label: 'Sep'},
@ -43,8 +158,33 @@ const App = () => {
style={{
marginTop: 100,
paddingVertical: 50,
backgroundColor: '#414141',
}}>
{!toggle ? (
<LineChart
thickness={6}
color="#07BAD1"
maxValue={600}
noOfSections={3}
areaChart
yAxisTextStyle={{color: 'lightgray'}}
data={latestData}
curved
startFillColor={'rgb(84,219,234)'}
endFillColor={'rgb(84,219,234)'}
startOpacity={0.4}
endOpacity={0.4}
spacing={38}
backgroundColor="#414141"
rulesColor="gray"
rulesType="solid"
initialSpacing={10}
yAxisColor="lightgray"
xAxisColor="lightgray"
dataPointsHeight={20}
dataPointsWidth={20}
/>
{/* {!toggle ? (
<BarChart
isThreeD
key={'xyz'}
@ -133,23 +273,25 @@ const App = () => {
// hideDataPoints1
// spacing={30}
data={data}
dataPointLabelWidth={30}
dataPointLabelShiftY={-30}
// data2={lineData1}
areaChart
initialSpacing={20}
// customDataPoint={() => {
// return (
// <View
// style={{
// height: 10,
// width: 10,
// backgroundColor: 'red',
// borderWidth: 2,
// borderColor: 'blue',
// borderRadius: 5,
// }}
// />
// );
// }}
customDataPoint={() => {
return (
<View
style={{
height: 10,
width: 10,
backgroundColor: 'red',
borderWidth: 2,
borderColor: 'blue',
borderRadius: 5,
}}
/>
);
}}
// focusedCustomDataPoint={() => {
// return (
// <View
@ -190,18 +332,18 @@ const App = () => {
pressEnabled
// showDataPointOnPress
showStripOnPress
showTextOnPress
textShiftY={-10}
textShiftX={-5}
textFontSize={18}
textColor={'green'}
stripWidth={1}
// showTextOnPress
// textShiftY={-10}
// textShiftX={-5}
// textFontSize={18}
// textColor={'green'}
// stripWidth={1}
// stripHeight={200}
// stripHeight={200}
stripOpacity={1}
curved
isAnimated
animationDuration={2000}
// stripOpacity={1}
// curved
// isAnimated
// animationDuration={2000}
// animationDuration={2000}
// dataPointsShape="rectangular"
// showGradient
@ -209,25 +351,25 @@ const App = () => {
yAxisColor={'rgb(78, 0, 142)'}
xAxisColor={'rgb(78, 0, 142)'}
// dataPointsColor={'yellow'}
dataPointsWidth={22}
dataPointsHeight={22}
dataPointsWidth={20}
dataPointsHeight={20}
xAxisThickness={3}
yAxisThickness={3}
dataPointsRadius={4}
focusedDataPointRadius={10}
// dataPointsRadius={4}
// focusedDataPointRadius={10}
yAxisTextStyle={{color: 'rgb(78, 0, 142)'}}
startFillColor={'rgb(200, 100, 244)'}
startOpacity={0.9}
endFillColor={'rgb(255, 255, 255)'}
endOpacity={0.2}
/>
)}
)} */}
<TouchableOpacity
{/* <TouchableOpacity
onPress={() => setToggle(!toggle)}
style={{marginTop: 100, alignSelf: 'center'}}>
<Text>Line Chart</Text>
</TouchableOpacity>
</TouchableOpacity> */}
</View>
);
};

60
docs/LineChart/LineChartProps.md
View File

@ -40,29 +40,40 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab
### Item description
| Key | Value type | Description |
| --------------------- | ---------- | ------------------------------------------------------------------------- |
| value | number | Value of the item representing representing its position |
| label | string | Label text appearing under the X axis |
| labelTextStyle | object | Style object for the label text appearing under the X axis |
| yAxisLabelText | string | Y axis label text |
| dataPointText | string | Text appearing near the data points |
| textShiftX | number | To shift the dataPointText text horizontally |
| textShiftY | number | To shift the dataPointText text vertically |
| textColor | ColorValue | Color of the dataPointText |
| textFontSize | number | Font size of the dataPointText |
| showDataPoint | Boolean | To show data point for the particular item |
| dataPointHeight | number | Height of the data point (when data point's shape is rectangular) |
| dataPointWidth | number | Width of the data point (when data point's shape is rectangular) |
| dataPointRadius | number | Radius of the data point (when data points' shape is circular) |
| dataPointColor | ColorValue | Color of the data point |
| dataPointShape | string | Shape of the data point (rectangular or circular) defaults to circular |
| showVerticalLine | Boolean | When set to true, a vertical line will be displayed along that data point |
| verticalLineColor | ColorValue | Color of the vertical Line displayed along the data point |
| verticalLineThickness | number | Thickness of the vertical Line displayed along the data point |
| Key | Value type | Description |
| ------------------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| value | number | Value of the item representing representing its position |
| label | string | Label text appearing under the X axis |
| labelTextStyle | object | Style object for the label text appearing under the X axis |
| labelComponent | Function | custom label component appearing under the X axis |
| yAxisLabelText | string | Y axis label text |
| dataPointText | string | Text appearing near the data points |
| textShiftX | number | To shift the dataPointText text horizontally |
| textShiftY | number | To shift the dataPointText text vertically |
| textColor | ColorValue | Color of the dataPointText |
| textFontSize | number | Font size of the dataPointText |
| dataPointHeight | number | Height of the data point (when data point's shape is rectangular) |
| dataPointWidth | number | Width of the data point (when data point's shape is rectangular) |
| dataPointRadius | number | Radius of the data point (when data points' shape is circular) |
| dataPointColor | ColorValue | Color of the data point |
| dataPointShape | string | Shape of the data point (rectangular or circular) defaults to circular |
| hideDataPoint | Boolean | To hide the data point |
| showVerticalLine | Boolean | When set to true, a vertical line will be displayed along that data point |
| verticalLineColor | ColorValue | Color of the vertical Line displayed along the data point |
| verticalLineThickness | number | Thickness of the vertical Line displayed along the data point |
| dataPointLabelWidth | number | width of the label shown beside a data point |
| dataPointLabelShiftX | number | horizontal shift of a label from its corresponding data point |
| dataPointLabelShiftY | number | vertical shift of a label from its corresponding data point |
| dataPointLabelComponent | Function | custom component rendered above a data point |
| focusedDataPointLabelComponent | Function | custom component rendered above a data point only when focused/selected (when the user presses) |
| showStrip | Boolean | To show a vertical strip along the data point (even if it's not focused/selected) |
| stripHeight | number | Height of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true |
| stripWidth | number | Width of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true |
| stripColor | ColorValue | Color of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true |
| stripOpacity | number | Opacity of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true |
**Alert!**\
If you are adding showDataPoint to an item, you must set hideDataPoints prop to true
**Alert**\
When you are using the `dataPointLabelComponent`, make sure to provide the `dataPointsHeight` and `dataPointsWidth` values too (either in the corresponding item object, or directly as a props of the <LineChart> component). Otherwise the data points might appear shifted from their intended positions.
---
@ -181,6 +192,9 @@ type referenceConfigType = {
| textShiftX | number | To shift the dataPointText text horizontally | 0 |
| textShiftY | number | To shift the dataPointText text vertically | 0 |
| customDataPoint | Function | A callback function to render a custom component as the data points | \_ |
| dataPointLabelWidth | number | width of the label shown beside a data point | 30 |
| dataPointLabelShiftX | number | horizontal shift of a label from its corresponding data point | 0 |
| dataPointLabelShiftY | number | vertical shift of a label from its corresponding data point | 0 |
---
@ -220,7 +234,7 @@ onPress={(item, index) => {
}}
```
Above code changes the pressed data point's color and radius. Since in this example, we are changing the data on th onPress event, the data must be a state variable.
Above code changes the pressed data point's color and radius. Since in this example, we are changing the data on the onPress event, the data must be a state variable.
---

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-native-gifted-charts",
"version": "0.2.1",
"version": "0.2.2",
"description": "The most complete library for Bar, Line, Area, Pie and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
"main": "src/index.tsx",
"files": [

346
src/LineChart/index.tsx
View File

@ -146,6 +146,9 @@ type propTypes = {
focusedDataPointColor?: ColorValue | String | any;
focusedDataPointRadius?: number;
focusedCustomDataPoint?: Function;
dataPointLabelWidth?: number;
dataPointLabelShiftX?: number;
dataPointLabelShiftY?: number;
startFillColor?: string;
endFillColor?: string;
@ -190,6 +193,7 @@ type referenceConfigType = {
type itemType = {
value?: number;
label: String;
labelComponent: Function;
labelTextStyle?: any;
dataPointText?: string;
textShiftX?: number;
@ -197,7 +201,7 @@ type itemType = {
textColor?: string;
textFontSize?: number;
showDataPoint?: Boolean;
hideDataPoint?: Boolean;
dataPointHeight?: number;
dataPointWidth?: number;
dataPointRadius?: number;
@ -205,6 +209,11 @@ type itemType = {
dataPointShape?: string;
customDataPoint?: Function;
stripHeight?: number;
stripWidth?: number;
stripColor?: ColorValue | String | any;
stripOpacity?: number;
focusedDataPointShape?: String;
focusedDataPointWidth?: number;
focusedDataPointHeight?: number;
@ -212,6 +221,13 @@ type itemType = {
focusedDataPointRadius?: number;
focusedCustomDataPoint?: Function;
dataPointLabelComponent?: Function;
focusedDataPointLabelComponent?: Function;
dataPointLabelWidth?: number;
dataPointLabelShiftX?: number;
dataPointLabelShiftY?: number;
showStrip?: Boolean;
showVerticalLine?: Boolean;
verticalLineColor?: string;
verticalLineThickness?: number;
@ -815,7 +831,12 @@ export const LineChart = (props: propTypes) => {
});
}
const renderLabel = (index: number, label: String, labelTextStyle: any) => {
const renderLabel = (
index: number,
label: String,
labelTextStyle: any,
labelComponent: Function,
) => {
return (
<View
style={[
@ -832,9 +853,15 @@ export const LineChart = (props: propTypes) => {
},
rotateLabel && {transform: [{rotate: '60deg'}]},
]}>
<Text style={[labelTextStyle, {textAlign: 'center'}]} numberOfLines={1}>
{label || ''}
</Text>
{labelComponent ? (
labelComponent()
) : (
<Text
style={[labelTextStyle, {textAlign: 'center'}]}
numberOfLines={1}>
{label || ''}
</Text>
)}
</View>
);
};
@ -843,6 +870,7 @@ export const LineChart = (props: propTypes) => {
index: number,
label: String,
labelTextStyle: any,
labelComponent: Function,
) => {
// console.log('label', label);
return (
@ -863,9 +891,15 @@ export const LineChart = (props: propTypes) => {
},
rotateLabel && {transform: [{rotate: '60deg'}]},
]}>
<Text style={[labelTextStyle, {textAlign: 'center'}]} numberOfLines={1}>
{label || ''}
</Text>
{labelComponent ? (
labelComponent()
) : (
<Text
style={[labelTextStyle, {textAlign: 'center'}]}
numberOfLines={1}>
{label || ''}
</Text>
)}
</Animated.View>
);
};
@ -1036,96 +1070,6 @@ export const LineChart = (props: propTypes) => {
);
};
const renderSpecificDataPoints = dataForRender => {
return dataForRender.map((item: itemType, index: number) => {
if (item.showDataPoint) {
if (item.dataPointShape === 'rectangular') {
return (
<Fragment key={index}>
<Rect
x={
initialSpacing -
(item.dataPointWidth || 2) / 2 -
1 +
spacing * index
}
y={
containerHeight -
(item.dataPointHeight || 2) / 2 +
10 -
(item.value * containerHeight) / maxValue
}
width={item.dataPointWidth || 2}
height={item.dataPointHeight || 2}
fill={item.dataPointColor || 'black'}
/>
{item.dataPointText && (
<CanvasText
fill={item.textColor || 'black'}
fontSize={item.textFontSize || 10}
x={
initialSpacing -
(item.dataPointWidth || 2) +
spacing * index +
(item.textShiftX || props.textShiftX || 0)
}
y={
containerHeight -
(item.dataPointHeight || 2) / 2 +
10 -
(item.value * containerHeight) / maxValue +
(item.textShiftY || props.textShiftY || 0)
}>
{item.dataPointText}
</CanvasText>
)}
</Fragment>
);
} else {
return (
<Fragment key={index}>
<Circle
cx={
initialSpacing -
(item.dataPointWidth || 2) / 2 +
spacing * index
}
cy={
containerHeight +
10 -
(item.value * containerHeight) / maxValue
}
r={item.dataPointRadius || 3}
fill={item.dataPointColor || 'black'}
/>
{item.dataPointText && (
<CanvasText
fill={item.textColor || 'black'}
fontSize={item.textFontSize || 10}
x={
initialSpacing -
(item.dataPointWidth || 2) +
spacing * index +
(item.textShiftX || props.textShiftX || 0)
}
y={
containerHeight -
(item.dataPointHeight || 2) / 2 +
10 -
(item.value * containerHeight) / maxValue +
(item.textShiftY || props.textShiftY || 0)
}>
{item.dataPointText}
</CanvasText>
)}
</Fragment>
);
}
}
return null;
});
};
const onStripPress = (item, index) => {
setSelectedIndex(index);
if (props.onPress) {
@ -1144,13 +1088,17 @@ export const LineChart = (props: propTypes) => {
textFontSize,
) => {
return dataForRender.map((item: itemType, index: number) => {
if (item.hideDataPoint) {
return null;
}
let dataPointsShape,
dataPointsWidth,
dataPointsHeight,
dataPointsColor,
dataPointsRadius,
text,
customDataPoint;
customDataPoint,
dataPointLabelComponent;
if (index === selectedIndex) {
dataPointsShape =
item.focusedDataPointShape ||
@ -1185,6 +1133,8 @@ export const LineChart = (props: propTypes) => {
props.focusedCustomDataPoint ||
item.customDataPoint ||
props.customDataPoint;
dataPointLabelComponent =
item.focusedDataPointLabelComponent || item.dataPointLabelComponent;
} else {
dataPointsShape = item.dataPointShape || dataPtsShape;
dataPointsWidth = item.dataPointWidth || dataPtsWidth;
@ -1195,8 +1145,17 @@ export const LineChart = (props: propTypes) => {
text = '';
}
customDataPoint = item.customDataPoint || props.customDataPoint;
dataPointLabelComponent = item.dataPointLabelComponent;
}
// console.log('comes in');
const currentStripHeight =
item.stripHeight === 0 ? 0 : item.stripHeight || stripHeight;
const currentStripWidth =
item.stripWidth === 0 ? 0 : item.stripWidth || stripWidth;
const currentStripOpacity =
item.stripOpacity === 0 ? 0 : item.stripOpacity || stripOpacity;
const currentStripColor = item.stripColor || stripColor;
return (
<Fragment key={index}>
{pressEnabled ? (
@ -1223,40 +1182,41 @@ export const LineChart = (props: propTypes) => {
fill={'none'}
/>
)}
{index === selectedIndex && showStripOnPress ? (
<Rect
x={initialSpacing + (spacing * index - dataPointsWidth / 2)}
y={
stripHeight
? containerHeight - stripHeight + 8
: containerHeight -
dataPointsHeight / 2 +
20 -
(item.value * containerHeight) / maxValue
}
width={stripWidth}
height={
stripHeight || containerHeight - dataPointsHeight / 2 + 20
}
opacity={stripOpacity}
fill={stripColor}
/>
) : null}
</>
) : null}
{item.showStrip ||
(pressEnabled && index === selectedIndex && showStripOnPress) ? (
<Rect
x={initialSpacing + (spacing * index - dataPointsWidth / 2)}
y={
currentStripHeight
? containerHeight - currentStripHeight + 8
: containerHeight -
dataPointsHeight / 2 +
20 -
(item.value * containerHeight) / maxValue
}
width={currentStripWidth}
height={
currentStripHeight ||
containerHeight - dataPointsHeight / 2 + 20
}
opacity={currentStripOpacity}
fill={currentStripColor}
/>
) : null}
{customDataPoint ? (
<View
style={{
position: 'absolute',
height: dataPointsHeight,
width: dataPointsWidth,
// backgroundColor: 'orange',
top:
containerHeight - (item.value * containerHeight) / maxValue,
left: initialSpacing - dataPointsWidth + spacing * index,
justifyContent: 'center',
alignItems: 'center',
}}>
style={[
styles.customDataPointContainer,
{
height: dataPointsHeight,
width: dataPointsWidth,
top:
containerHeight - (item.value * containerHeight) / maxValue,
left: initialSpacing - dataPointsWidth + spacing * index,
},
]}>
{customDataPoint()}
</View>
) : null}
@ -1282,35 +1242,10 @@ export const LineChart = (props: propTypes) => {
}
/>
)}
{text ? (
!showTextOnPress || index === selectedIndex ? (
<CanvasText
fill={item.textColor || textColor}
fontSize={item.textFontSize || textFontSize}
x={
initialSpacing -
dataPointsWidth +
spacing * index +
(item.textShiftX ||
props.textShiftX ||
props.textShiftX ||
0)
}
y={
containerHeight -
dataPointsHeight / 2 +
10 -
(item.value * containerHeight) / maxValue +
(item.textShiftY || props.textShiftY || 0)
}>
{text}
</CanvasText>
) : null
) : null}
</Fragment>
) : (
<Fragment key={index}>
{props.customDataPoint ? null : (
{customDataPoint ? null : (
<Circle
cx={initialSpacing - dataPointsWidth / 2 + spacing * index}
cy={
@ -1328,30 +1263,59 @@ export const LineChart = (props: propTypes) => {
}
/>
)}
{text ? (
!showTextOnPress || index === selectedIndex ? (
<CanvasText
fill={item.textColor || textColor}
fontSize={item.textFontSize || textFontSize}
x={
initialSpacing -
dataPointsWidth +
spacing * index +
(item.textShiftX || props.textShiftX || 0)
}
y={
containerHeight -
dataPointsHeight / 2 +
10 -
(item.value * containerHeight) / maxValue +
(item.textShiftY || props.textShiftY || 0)
}>
{text}
</CanvasText>
) : null
) : null}
</Fragment>
)}
{dataPointLabelComponent ? (
!showTextOnPress || index === selectedIndex ? (
<View
style={[
styles.customDataPointContainer,
{
top:
containerHeight +
(item.dataPointLabelShiftY ||
props.dataPointLabelShiftY ||
0) -
(item.value * containerHeight) / maxValue,
left:
initialSpacing +
(item.dataPointLabelShiftX ||
props.dataPointLabelShiftX ||
0) -
(item.dataPointLabelWidth
? item.dataPointLabelWidth + 20
: props.dataPointLabelWidth
? props.dataPointLabelWidth + 20
: 50) /
2 +
spacing * index,
},
]}>
{dataPointLabelComponent()}
</View>
) : null
) : text ? (
!showTextOnPress || index === selectedIndex ? (
<CanvasText
fill={item.textColor || textColor}
fontSize={item.textFontSize || textFontSize}
x={
initialSpacing -
dataPointsWidth +
spacing * index +
(item.textShiftX || props.textShiftX || 0)
}
y={
containerHeight -
dataPointsHeight / 2 +
10 -
(item.value * containerHeight) / maxValue +
(item.textShiftY || props.textShiftY || 0)
}>
{text}
</CanvasText>
) : null
) : null}
</Fragment>
);
});
@ -1453,7 +1417,7 @@ export const LineChart = (props: propTypes) => {
textColor1,
textFontSize1,
)
: renderSpecificDataPoints(data)}
: null}
{!hideDataPoints2
? renderDataPoints(
data2,
@ -1465,7 +1429,7 @@ export const LineChart = (props: propTypes) => {
textColor2,
textFontSize2,
)
: renderSpecificDataPoints(data2)}
: null}
{!hideDataPoints3
? renderDataPoints(
data3,
@ -1477,7 +1441,7 @@ export const LineChart = (props: propTypes) => {
textColor3,
textFontSize3,
)
: renderSpecificDataPoints(data3)}
: null}
</Svg>
</View>
);
@ -1560,7 +1524,7 @@ export const LineChart = (props: propTypes) => {
textColor1,
textFontSize1,
)
: renderSpecificDataPoints(data)}
: null}
{!hideDataPoints2
? renderDataPoints(
data2,
@ -1572,7 +1536,7 @@ export const LineChart = (props: propTypes) => {
textColor2,
textFontSize2,
)
: renderSpecificDataPoints(data2)}
: null}
{!hideDataPoints3
? renderDataPoints(
data3,
@ -1584,7 +1548,7 @@ export const LineChart = (props: propTypes) => {
textColor3,
textFontSize3,
)
: renderSpecificDataPoints(data3)}
: null}
</Svg>
</Animated.View>
);
@ -1729,8 +1693,18 @@ export const LineChart = (props: propTypes) => {
return (
<View key={index}>
{isAnimated
? renderAnimatedLabel(index, item.label, item.labelTextStyle)
: renderLabel(index, item.label, item.labelTextStyle)}
? renderAnimatedLabel(
index,
item.label,
item.labelTextStyle,
item.labelComponent,
)
: renderLabel(
index,
item.label,
item.labelTextStyle,
item.labelComponent,
)}
{/* {renderLabel(index, item.label, item.labelTextStyle)} */}
</View>
);

5
src/LineChart/styles.tsx
View File

@ -39,4 +39,9 @@ export const styles = StyleSheet.create({
bottomLabel: {
width: '100%',
},
customDataPointContainer: {
position: 'absolute',
justifyContent: 'center',
alignItems: 'center',
},
});