@computools/react-native-line-chart

@computools/react-native-line-chart

Installation

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

Usage

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

// ...

const dummyData: Item[] = [
  { date: new Date('01/01/2021'), middleUsage: -10 },
  { date: new Date('01/04/2021'), middleUsage: 5 },
  { date: new Date('01/07/2021'), middleUsage: 5 },
  { date: new Date('01/12/2021'), middleUsage: 10 },
  { date: new Date('01/19/2021'), middleUsage: 5 },
  { date: new Date('01/26/2021'), middleUsage: 10 },
  { date: new Date('02/03/2021'), middleUsage: 20 },
  { date: new Date('02/10/2021'), middleUsage: 15 },
  { date: new Date('02/17/2021'), middleUsage: 12 },
];

export const App = () => {
  const getYValue = ({ middleUsage }: Item) => middleUsage;
  const getXValue = ({ date }: Item) => date.getTime();
  const getXLabel = ({ date }: Item) => {
    const day = date.getDate().toString();
    const month = (date.getMonth() + 1).toString();

    const convertDay = day.length === 1 ? 0 + day : day;
    const convertMonth = month.length === 1 ? 0 + month : month;

    return `${convertDay}/${convertMonth}`;
  };

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

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

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

---

getXValue: <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