react-native-touchable-graph

React Native component for simply creating a graph, without any iOS or Android issue of touch.

Motivation

Victory Native is a great library, but there are tons of problems with the touch behaviour, because it is based on react-native-svg. The idea is to make a wrapper which replace the touchable svg element with react native Touchable component, so you are sure that it will work great both on Android and iOS.

Example app

Android example | Ios example :-------------------------:|:-------------------------: |

Installation

1. Install library and react-native-svg

   npm i --save victory-native react-native-svg

   Then, if victory-native version >= 0.16.6

    npm i --save react-native-touchable-graph

   else

    npm i --save [email protected]

2. Link native code for SVG

   react-native link react-native-svg

Usage

Use as follows:

import { VictoryAxis, VictoryBar, VictoryChart, VictoryArea } from 'victory-native'
import TouchableGraph from 'react-native-touchable-graph';

const data = [
  { x: 1, y: 13000 },
  { x: 2, y: 16500 },
  { x: 3, y: 14250 },
  { x: 4, y: 19000 }
];


<TouchableGraph
  onPressBar={(data) => { console.log(data) }}
  onPressTickAxis={(data) => { console.log(data) }}
  >
  <VictoryChart>
    <VictoryAxis
      crossAxis
      orientation="left"
    />
    <VictoryAxis 
      dependentAxis
      crossAxis
      orientation="bottom"
    />
    <VictoryBar
      data={data}
    />
    <VictoryArea
      data={data}
    />
  </VictoryChart>
</TouchableGraph>

Props

Bar props :

• barStyle (Object) or (Function(barData, index)) - Bar style
• onPressBar (Function(barData, index)) - Callback when a bar is tapped
• renderBar (Function(barData, index)) - Custom bar
• getBarDatum (Function(bars)) - Get Bars datum

Tick axis props :

• tickAxisStyle (Object) or (Function(tickData, index)) - Tick axis style
• tickAxisTextStyle (Object) or (Function(tickData, index)) - Tick axis text style
• onPressTickAxis (Function(tickData, index)) - Callback when a tick axis is tapped
• renderTickAxis (Function(tickData, index)) - Custom tickAxis
• getTickAxisDatum (Function(ticks)) - Get Ticks axis datum

Other props :

• renderLoading (Function()) - Render a loading view when initializing

Roadmap

Improve for :

• VictoryAxis
• VictoryBar
• VictoryChart

Adapt it for :

• VictoryArea
• VictoryBoxPlot
• VictoryCandlestick
• VictoryErrorBar
• VictoryPie
• VictoryPolarAxis
• VictoryScatter
• VictoryStack
• VictoryVoronoi

Others :

• Example
• Expo Example
• Performance
• Tests

Author

Hugo How-Choong

License

MIT