Forked from https://github.com/indiespirit/react-native-chart-kit
Same library, just smaller and optimised for the Blockspace.ch cryptocurrency App
React Native Line Chart Documentation
Import components
yarn add react-native-line-chart
- Use with ES6 syntax to import components
Quick Example
<View> <Text> Bezier Line Chart </Text> <LineChart = = // = = = /></View>
Chart style object
Define a chart style object with following properies as such:
const chartConfig = backgroundGradientFrom: '#1E2923' backgroundGradientTo: '#08130D' `rgba(26, 255, 146, )`
Property | Type | Description |
---|---|---|
backgroundGradientFrom | string | Defines the first color in the linear gradient of a chart's background |
backgroundGradientTo | string | Defines the second color in the linear gradient of a chart's background |
color | function => string | Defines the base color function that is used to calculate colors of labels and sectors used in a chart |
Responsive charts
To render a responsive chart, use Dimensions
react-native library to get the width of the screen of your device like such
const screenWidth = Dimensionswidth
Line Chart
const data = labels: 'January' 'February' 'March' 'April' 'May' 'June' datasets: data: 20 45 28 80 99 43
Property | Type | Description |
---|---|---|
data | Object | Data for the chart - see example above |
width | Number | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive |
height | Number | Height of the chart |
chartConfig | Object | Configuration object for the chart, see example config object above |
Bezier Line Chart
Property | Type | Description |
---|---|---|
bezier | boolean | Add this prop to make the line chart smooth and curvy |
More styling
Every charts also accepts style
props, which will be applied to parent svg
or View
component of each chart.
renderHorizontalLines(config)
Renders background horizontal lines like in the Line Chart and Bar Chart. Takes a config object with following properties:
// width of your chart width: Number // height of your chart height: Number // how many lines to render count: Number // top padding from the chart top edge paddingTop: Number
renderVerticalLabels(config)
Render background vertical lines. Takes a config object with following properties:
// data needed to calculate the number of lines to render data: Array // width of your chart width: Number // height of your chart height: Number paddingTop: Number paddingRight: Number
renderDefs(config)
Render definitions of background and shadow gradients
// width of your chart width: Number // height of your chart height: Number // first color of background gradient backgroundGradientFrom: String // second color of background gradient backgroundGradientTo: String
More information
This library is built on top of the following open-source projects:
- react-native-chart-kit (https://github.com/indiespirit/react-native-chart-kit)
- react-native-svg (https://github.com/react-native-community/react-native-svg)
- paths-js (https://github.com/andreaferretti/paths-js)
Contribute
See the contribution guide and join the contributors!