CODEWITHSUNDEEP
react-nativecharts
Sergey Anisimov
Sergey Anisimov

Reputation: 895

Create XY chart, React-Native

How can I create basic xy chart in react-native? For example I have data: 

chart_data = [
[0,0],[0,1],[1,1],[1,0],[0,0]
]

This is the points of a square. Most of all libraries offer to create line chart, which will create other line-type chart and the result for this points would be - trapeze. Help me, please

Upvotes: 0

Views: 1613

Answers (3)

David
David

Reputation: 16277

Use react-native-chart

import React, { StyleSheet, View, Component } from 'react-native';
import Chart from 'react-native-chart';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    chart: {
        width: 200,
        height: 200,
    },
});

const data = [
    [0, 1],
    [1, 3],
    [3, 7],
    [4, 9],
];

class SimpleChart extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Chart
                    style={styles.chart}
                    data={data}
                    verticalGridStep={5}
                    type="line"
                 />
            </View>
        );
    }
}

Note that MPAndroidChart supports Android only, whereas react-native-chart supports both Android and iOS.

Example charts: enter image description here

Upvotes: 1

Tobsmaster
Tobsmaster

Reputation: 11

You could try to use Canvas and its methods. There you can draw points lines or shapes...

Upvotes: 0

k0bin
k0bin

Reputation: 349

You should try MPAndroidChart, there's even a react native wrapper for it.

Upvotes: 1

Related Questions