A chart library for React Native. Currently there is support for vertical bar graphs, horizontal bar graphs, and line graphs, with support coming for scatter plots, pie charts, progress rings, and heat maps.
-
startAtZero
?: boolean -
hasXAxisLabels
?: boolean -
hasYAxisLabels
?: boolean -
xAxisLabelCount
?: number (defaults to:4
) -
xAxisLabelStyle
?: {fontFamily
?: stringfontSize
?: numberfontWeight
?: numbercolor
?: stringrotation
?: numberxOffset
?: numberyOffset
?: numberprefix
?: stringsuffix
?: string,position
?: string (accepts:'left'
or'right'
. Defaults to:'left'
)width
?: number,decimals
?: number
}
-
yAxisLabelStyle
?: {fontFamily
?: stringfontSize
?: numberfontWeight
?: numbercolor
?: stringrotation
?: numberxOffset
?: numberyOffset
?: numberheight
?: number
}
-
hasXAxisBackgroundLines
?: boolean -
hasYAxisBackgroundLines
?: boolean -
xAxisBackgroundLineStyle
?: {strokeWidth
?: numbercolor
?: string
}
-
yAxisBackgroundLineStyle
?: {strokeWidth
?: numbercolor
?: string
}
npm i @chartiful/react-native-chart-builder @chartiful/react-native-vertical-bar-graph
import VerticalBarGraph from '@chartiful/react-native-vertical-bar-graph';
import { View, StyleSheet } from 'react-native';
const config = {
hasXAxisBackgroundLines: false,
xAxisLabelStyle: {
position: 'right',
prefix: '$'
}
};
export const YourComponent = () => (
<View>
<VerticalBarGraph
data={[20, 45, 28, 80, 99, 43, 50]}
labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']}
width={375}
height={300}
barRadius={5}
barWidthPercentage={0.65}
baseConfig={config}
style={styles.chart}
/>
</View>
);
const styles = StyleSheet.create({
chart: {
marginBottom: 30,
padding: 10,
paddingTop: 20,
borderRadius: 20,
backgroundColor: 'green',
width: 375
}
});
-
height
: number -
width
: number -
data
:<Array>number
-
labels
?:<Array>string
(defaults to[1, 2, 3, ...]
) -
barRadius
?: number (defaults to0
) -
barWidthPercentage
?: number (defaults to0.7
) -
barColor
?: string (defaults to#000000
) -
style
?:ReactNative.StyleSheet
-
baseConfig
?:BaseChartConfig
npm i @chartiful/react-native-chart-builder @chartiful/react-native-line-graph
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'
}
});
-
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
npm i @chartiful/react-native-chart-builder @chartiful/react-native-horizontal-bar-graph
import HorizontalBarGraph from '@chartiful/react-native-horizontal-bar-graph';
import { View, StyleSheet } from 'react-native';
const config = {
hasYAxisBackgroundLines: false,
xAxisLabelStyle: {
rotation: 0,
fontSize: 12,
width: 70,
yOffset: 4,
xOffset: -15
},
yAxisLabelStyle: {
rotation: 30,
fontSize: 13,
prefix: '$',
position: 'bottom',
xOffset: 15,
decimals: 2,
height: 100
}
};
export const YourComponent = () => (
<View>
<HorizontalBarGraph
data={[125, 100, 50, 75, 100, 125]}
labels={['Q1, 2019', 'Q2, 2019', 'Q3, 2019', 'Q4, 2019', 'Q1, 2020', 'Q2, 2020']}
width={375}
height={350}
barRadius={15}
baseConfig={config}
style={styles.chart}
/>
</View>
);
const styles = StyleSheet.create({
chart: {
marginBottom: 30,
padding: 10,
paddingTop: 20,
borderRadius: 20,
width: 375,
backgroundColor: 'green'
}
});
-
height
: number -
width
: number -
data
:<Array>number
-
labels
?:<Array>string
(defaults to[1, 2, 3, ...]
) -
barRadius
?: number (defaults to0
) -
barWidthPercentage
?: number (defaults to0.7
) -
barColor
?: string (defaults to#000000
) -
style
?:ReactNative.StyleSheet
-
baseConfig
?:BaseChartConfig
The full documentation for React Native Charts can be found here.
If interested in helping out, checkout the Contribution Guide!