@computools/react-native-curve-chart

react-native-curve-chart

Usage no npm install needed!

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

README

@computools/react-native-curve-chart

@computools/react-native-curve-chart

Installation

npm install @computools/react-native-curve-chart

Usage

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

// ...

interface Item {
  date: Date;
  crp: number;
}

const dummyData: Array<Item> = [
  { date: new Date('09/01/2021'), crp: -10 },
  { date: new Date('09/07/2021'), crp: 5 },
  { date: new Date('09/14/2021'), crp: -5 },
  { date: new Date('09/21/2021'), crp: 15 },
  { date: new Date('09/28/2021'), crp: 10 },
];

const WEEK_DAYS = [
  'Sunday',
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thursday',
  'Friday',
  'Saturday',
];

export const App = () => {
  const getYValue = ({ crp }: Item) => crp;
  const getXValue = ({ date }: Item) => date.getTime();
  const getXLabel = ({ date }) => WEEK_DAYS[date.getDay()].slice(0, 3);

  return (
    <View style={styles.container}>
      <CurveChart
        data={dummyData}
        canvasHeight={130}
        quantityLines={4}
        startWadeColor="red"
        endWadeColor="blue"
        getYValue={getYValue}
        getXValue={getXValue}
        getXLabel={getXLabel}
        lineSize={4}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
    paddingHorizontal: 16,
  },
});

Properties

data: Array<T>;

Required data


getYValue: <T>(item: T) => number;

Required callback which return Y values


getXValue: <T>(item: T) => number;

Required callback which return X values


getXVLabel: <T>(item: T) => string;

Required callback which return X label values


labelColor?: string;

You can set up label color


xLabelsHeight?: number;

Label height


xLabelWidth?: number;

You can provide x label width


quantityLines?: number

Quantity Y labels


yMaxValues?: number;

Max value for Y axis


canvasHeight?: number;

Canvas height


canvasPadding?: number;

Canvas vertical padding


strokeSize?: number;

You can set up stroke size


fontSize?: number;

You can set up label font size


startWadeColor?: string;

Start wade color


endWadeColor?: string;

End wade color


lineSize?: number;

You can change line size


linesColor?: string;

You can change lines color


horizontalSectionWidth?: number;

You can set up horizontal section width(for X axis)


Example

react-native-curve-chart

Contributing

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

License

MIT