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
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT