Using Recharts in React Native project

1. Introduction to Recharts
Recharts is a chart library built with React and D3. Recharts supports many kinds of charts such as Area Chart, Bar Chart, Line Chart, and Pie Chart. The strength of Recharts is easy to extend and customize. For example, we can change the active cursor, legend, and tick in Axises to our own component and styling. The following is an example of how to customize a tick on the X Axis:
const CustomizedAxisTick = React.createClass({
render () {
const {x, y, stroke, payload} = this.props;
return
<text x={0} y={0} dy={16} textAnchor=”end"
fill="#666" transform="rotate(-35)">
{payload.value}
</text>
</g>
}
});

const SimpleLineChart = React.createClass({
render () {
return <LineChart>
<XAxis dataKey="name" tick={<CustomizedAxisTick/>}/>
<YAxis/>
<CartesianGrid />
<Line type="monotone" dataKey="pv" />
</LineChart>
}
});
Find more examples here and the full Recharts API here.

Link: https://dzone.com/articles/using-recharts-in-react-native-project?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev