@computools/react-native-dot-chart

@computools/react-native-dot-chart

Installation

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

Usage

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

// ...
const HOUR = 60;

const dummyData = [
  {
    id: 1,
    y: 0,
    x: 0,
  },
  {
    id: 2,
    y: HOUR * 1.1,
    x: 2,
  },
//...

export const App = () => {
  const getYValue = (item: Item) => item.y;
  const getXValue = (item: Item) => item.x;

  return (
    <View style={styles.container}>
      <DotChart
        data={dummyData.data}
        quantityLines={4}
        yLabelTextWidth={100}
        canvasHeight={145}
        yLabelText="Work hours"
        labelsText="m"
        xLabelText="Quantity calls"
        dashWidth={2}
        dashHeight={0.8}
        gapSize={2}
        dashColor="gray"
        maxYValue={240}
        maxXValue={35}
        getYValue={getYValue}
        getXValue={getXValue}
      >
        <View style={styles.dot} />
      </DotChart>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  dot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: 'purple',

    shadowColor: '#000',
    shadowOffset: {
      width: 4,
      height: 7,
    },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    elevation: 5,
  },
});

Example

Properties

data: Item[]

Required property for chart!

---

quontityLines: number

You can set up quontity lines

---

yLabelTextWidth: number

Property for y label width(height)

---

yLabelText?: string

You can provide labels Y axis text

---

labelsText?: string

You can provide labels for Y axis text

---

xLabelText?: string

You can provide label Titlefor X axis

---

canvasHeight?: number

chart height(default: 130)

---

dashWidth?: number

line dash width(default: 2)

---

dashHeight?: number

line dash height(default: 0.8)

---

gapSize?: number

line gap size(default: 2)

---

dashColor?: string

line dash color(default: 'gray')

---

getYValue?: (item: Item) => number;

Callback which get array elem and return, Y value

---

getXValue?: (item: Item) => number;

Callback which get array elem and return, X value

---

Contributing

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

License

MIT