Create A Fully Customizable and Responsive Line Chart For React Native

Category: React React Charts | June 30, 2021
Author: N1ghtly
Official Page: Go to website
Last Update: June 30, 2021
License: MIT

Line Chart For React Native

Description:

A fully customizable and responsive line chart for React Native, this component is easy to integrate in your existing or new project and provide you the flexibility to customize the chart as per your requirement and this component get updated regularly on the GitHub.

How to use it?

  1. First, you will need to install the component in your project by running NPM command.
npm install react-native-responsive-linechart

2. Then, import the component like this.

import { Chart, VerticalAxis, HorizontalAxis, Line } from 'react-native-responsive-linechart';

3. Now, write the code to create responsive line chart.

<Chart
  style={{ height: 200, width: '100%', backgroundColor: '#eee' }}
  xDomain={{ min: -2, max: 10 }}
  yDomain={{ min: -2, max: 20 }}
  padding={{ left: 20, top: 10, bottom: 10, right: 10 }}
>
  <VerticalAxis tickValues={[0, 4, 8, 12, 16, 20]} />
  <HorizontalAxis tickCount={3} />
  <Line data={data1} smoothing="none" theme={{ stroke: { color: 'red', width: 1 } }} />
  <Line data={data2} smoothing="cubic-spline" theme={{ stroke: { color: 'blue', width: 1 } }} />
</Chart>

const data1 = [
  { x: -2, y: 1 },
  { x: -1, y: 0 },
  { x: 8, y: 13 },
  { x: 9, y: 11.5 },
  { x: 10, y: 12 }
]

const data2 = [
  { x: -2, y: 15 },
  { x: -1, y: 10 },
  { x: 0, y: 12 },
  { x: 1, y: 7 },
  { x: 8, y: 12 },
  { x: 9, y: 13.5 },
  { x: 10, y: 18 }
]

You might be interested in Animated Chart Component For React Native.