Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-native-responsive-linechart with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-native/package.json"); // react-native is a peer dependency. require("react-native-gesture-handler/package.json"); // react-native-gesture-handler is a peer dependency. require("react-native-svg/package.json"); // react-native-svg is a peer dependency. var reactNativeResponsiveLinechart = require("react-native-responsive-linechart")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-responsive-linechart v5.2.1

Customizable linechart for react-native that works with flex

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

Screenshots

Preview 1 Preview 2 Preview 3 Preview 4 Preview 5

Quick example

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

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

[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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free