react-native-responsive-linechart

!npm !npm !GitHub !GitHub stars

Announcing v5

Breaking changes with respect to v4:

- New dependency on react-native-gesture-handler

Breaking changes with respect to v3:

- Support for data point visualizations
- Library supplied tooltip component is renamed from BoxTooltip to just Tooltip
- Minor theme changes (box -> shape rename)

Additional features:
- Scrollable charts!

View installation docs & examples here

$3

!Preview 1
!Preview 2
!Preview 3
!Preview 4
!Preview 5

$3

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

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 }}
>






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 }
]
``

[OLD] Announcing v3

Version 3 is a complete re-write from the ground up with the following exciting features:

- Completely written in Typescript
- Composable API, every part of the chart is its own component.
- Very few dependencies (Total package size is only 62 kilobytes)
- New documentation website with extensive examples
- Support for smooth/linear line & charts area charts, tooltips and more

Due to the nature of the changes, version 2.2 and below is now no longer supported. You can find the old README here.