Line Graph - React Native
Installation
npm i @chartiful/react-native-chart-builder @chartiful/react-native-line-graph
Example
import LineGraph from '@chartiful/react-native-line-graph';
import { View, StyleSheet } from 'react-native';
const config = {
startAtZero: false,
hasXAxisBackgroundLines: false,
xAxisLabelStyle: {
prefix: '$',
offset: 0
}
};
export const YourComponent = () => (
<View>
<LineGraph
data={[10, 15, 7, 20, 14, 12, 10, 20]}
width={375}
height={300}
isBezier
hasShadow
baseConfig={config}
style={styles.chart}
/>
</View>
);
const styles = StyleSheet.create({
chart: {
marginBottom: 30,
padding: 10,
paddingTop: 20,
borderRadius: 20,
width: 375,
backgroundColor: 'lightblue'
}
});
Interface
-
height
: number -
width
: number -
data
:<Array>number
-
labels
?:<Array>string
(defaults to[1, 2, 3, ...]
) -
hasLine
?: boolean (defaults totrue
) -
lineColor
?: string (defaults to'#000000'
) -
lineWidth
?: number (defaults to3
) -
hasDots
?: boolean (defaulst totrue
) -
dotColor
?: string (defaults to'#000000'
) -
dotSize
?: number (defaulse to5
) -
isBezier
?: boolean (defaults tofalse
) -
hasShadow
?: boolean (defaults tofalse
) -
style
?:ReactNative.StyleSheet
-
baseConfig
?:BaseChartConfig
(found here: link)