React Native Simple Line Chart
A simple/interactive/fast line chart component for React Native using d3, react-native-svg, react-native-gesture-handler and react-native-reanimated.
🦄 Features
-
✅ Supports RTL languages
-
✅ Customizable active point component
-
✅ Linear gradient line color
-
✅ Supports different curve types
-
✅ Full utilization of reanimated and shared values
-
✅ Supports area chart presentation
How we use it in Malaa App
🔮 Example App Demo
- run it your self using
yarn example [ios/andriod]
or watch this Video
📦 Installation
npm install react-native-simple-line-chart
or
yarn add react-native-simple-line-chart
⚠️ Make sure you have react-native-reanimated + react-native-gesture-handler + react-native-svg installed in your project.
⚒️ Usage
import LineChart from 'react-native-simple-line-chart';
<LineChart
line1={{
data: [
{
value: 0,
extraData: {
date: new Date('2020-01-01').getTime(),
formattedValue: '0',
formattedTime: '2020-01-01',
},
},
{
value: 20,
extraData: {
date: new Date('2020-01-02').getTime(),
formattedValue: '20',
formattedTime: '2020-01-02',
},
},
{
value: 15,
extraData: {
date: new Date('2020-01-03').getTime(),
formattedValue: '15$',
formattedTime: '2020-01-03',
},
},
{
value: 35,
extraData: {
date: new Date('2020-01-04').getTime(),
formattedValue: '35$',
formattedTime: '2020-01-04',
},
},
],
activePointConfig: {
color: 'black',
borderColor: 'black',
radius: 4,
line: true,
lineColor: 'gray',
lineOpacity: 0.7,
lineWidth: 1,
lineDashArray: [10, 5],
hideAfterActivePoint: true,
},
lineColor: 'pink',
curve: 'linear',
endPoint: {
color: 'pink',
radius: 5,
animated: true,
},
activePointComponent: (point: DataPoint | any) => {
return (
<View
style={{
backgroundColor: 'pink',
padding: 10,
borderRadius: 10,
}}
>
<Text style={{ color: 'white' }}>
{point?.extraData?.formattedValue}
</Text>
<Text style={{ color: 'white' }}>
{point?.extraData?.formattedTime}
</Text>
</View>
);
},
}}
backgroundColor={undefined}
height={200}
width={Dimensions.get('screen').width}
/>