@computools/react-native-chart

This is react-native chart package

Usage no npm install needed!

<script type="module">
  import computoolsReactNativeChart from 'https://cdn.skypack.dev/@computools/react-native-chart';
</script>

README

@computools/react-native-chart

@computools/react-native-chart

npm version

Installation

npm install @computools/react-native-chart

Usage

import { ChartCard } from '@computools/react-native-chart';

// ...
const data = [
  {
    value: 10,
    date: '2020-01-31T00:00:00.000Z',
  },
  {
    value: 20,
    date: '2020-02-01T00:00:00.000Z',
  },
  {
    value: 40,
    date: '2020-02-02T00:00:00.000Z',
  },
];

export const App = () => (
  <SafeAreaView style={styles.container}>
    <ChartCard
      data={data}
      containerStyle={styles.containerStyle}
      chartSize={300}
      lineColor="red"
      lineSize={1}
      fadeColor="blue"
      fadeOpacity={1}
      highLightColor="purple"
      highLightOpacity={0}
    />
  </SafeAreaView>
);

//...
const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    height: '100%',
  },
  containerStyle: {
    borderRadius: 16,
    borderWidth: 1,
    borderColor: 'purple',
    padding: 8,
  },
});

Properties

data: Array<{value:number; date: string}>

Required property for chart!


containerStyle?: StyleProp<ViewStyle>

You can style container


chartSize?: number

Chart size


lineColor?: Color

Chart line color


lineSize?: number

Chart line size(width)


fadeColor?: Color

Fade color


fadeOpacity?: number

Fade opacity


highLightColor?: Color

Highlight color


highLightOpacity?: number

Highlight opacity


Example

react-native-chart

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT